Shift key recognised with an ahref/onClick event?

Forum Moderators: open

Message Too Old, No Replies

Shift key recognised with an ahref/onClick event?

Shift, key, modifier, event, Javascript

RichardJW

4:17 pm on Oct 13, 2005 (gmt 0)

Hi all,
I'm looking into being able to fill/modify the contents of two form fields, one field on a single click and the other on a shift-click event.
This is all working fine but only for IE 5.2/Safari/Opera 8.02 but fails in Camino(Gecko). I don't have much experience in working across the different DOM models, I have tried different code branching etc. but testing has been with limited success.

Could anyone give me some practical pointers to handle the 'shiftkey' event for Gecko based browser/Netscape4? (Gecko is more critical at the moment)

The code I have been testing with is as below:

Function:


 function fillform(txt) { 
if (event.shiftKey) 
{event.returnValue = false; 
alert('shift on');  
MM_changeProp('fieldone','','value',txt,'INPUT/TEXT')}  
else {alert('click only');  
MM_changeProp('fieldtwo','','value',txt,'INPUT/TEXT')} 
}

HTML:

<a href="#" onClick="fillform('mytext')">click</a>

Many thanks in advance,

RJW

rocknbil

5:10 pm on Oct 13, 2005 (gmt 0)

Google for window.Event, it's different for some of the Mozillas. I don't have any handy examples other than this one, which checks for the enter key, but the concept is the same:

RonPK

5:22 pm on Oct 13, 2005 (gmt 0)

Here's a pointer: [mozilla.org...]

RichardJW

12:39 pm on Oct 14, 2005 (gmt 0)

Thanks for the replies.
I have previously looked at similar information but to no avail, in terms of being able to apply to a solution. The code posted, I tested but without gaining any successful output as yet...
When an event is passed to a function does it need some type of special identifier/parameter?... what is the '(e)' in the function declaration? I've seen it before, but didn't understand the significance. Apologies for the ignorance I'm just really starting to cut my teeth with JS.

RJW

Bernard Marx

1:10 pm on Oct 14, 2005 (gmt 0)

The argument used on event handling functions (commonly e) is the event object passed through to the function.

Such an event object is not passed by IE. The arg will be undefined. IE uses a global

event

property, carrying the event for the current thread.

"Normalisation" is acheived with a quick "short-circuit" evaluation, which in JS logic will produce the defined object. The same thing is done for the (which¦keyCode) property of this event object.

I think Moz browsers have a

keyCode

property too, but it acts differently, so we give the event the opportunity to reveal its

which

instead first.

Try this:
(but replace broken ¦¦ with uncorrupted ones)

<html><head><title>TEST</title>
<script type="text/javascript">
document.onkeypress = function(e)
{
  e = e¦¦event;
  var code = e.which¦¦e.keyCode;
  alert(code)
}
</script>
</head>
<body>
 <h3>Press a key</h3>
</body>
</html>

PS Standards browsers have a global

[b]E[/b]vent

object. This is the constructor for the event objects that are passed into handlers.

Bernard Marx

1:25 pm on Oct 14, 2005 (gmt 0)

RE: shiftKey

IE, FF & Opera all respond to [eventObj].shiftKey.

Some browsers will decide not to fire events for certain keys depending on whether the event is onkeypress, onkeydown or onkeyup. With onkeypress, I have just noticed that Opera fires an event for the shift key itself. This could be useful, but it could also mess up a script that accepts the behaviour of the other browsers. The shift key, in normal circumstances, should be rejected - else we'll get 2 events for the price of one.

document.onkeypress = function(e)
{
  e = e¦¦event;
  var code = e.which¦¦e.keyCode;
  /* reject initial shift use */
  if(code==16) return;
  var shift = e.shiftKey;
  alert('code: '+code+'\n'+'shift: '+shift)
}

Bernard Marx

2:03 pm on Oct 14, 2005 (gmt 0)

RichardJW, I have just realised that you may get confused if you are using inline event handlers. In this case, the arrangement is different. For standards browsers, to pass an event in an inline event handler you need to identify the event object by using a keyword. It just so happens that this keyword is

[blue]event[/blue]

. This means that IE recognises it too (but for a different reason).

The

event

keyword can be placed anywhere in the passed arguments.

DEMO:

<html><head><title>TEST</title>
<script type="text/javascript">
function test(arg0, e)
{
  alert('arg0:'+arg0+'\n'+'e: '+e.type);
}
</script>
</head>
<body>
 <h3 onclick="test('a',[blue]event[/blue])">Click Me</h3>
</body>
</html>

RichardJW

8:11 am on Oct 17, 2005 (gmt 0)

Thanks for the recent posts Bernard Marx.
I'll have a look into it & get back to you.

Regards,

RJW

RichardJW

2:26 pm on Oct 17, 2005 (gmt 0)

Bernard Marx, perfect.
It's working very well now. Passing the event through to the function I'm sure helps for a start! For general reference, the final code in the context of my initial function is as below:

function fillform(txt,e) {
 e = e¦¦event; 
 var code = e.which¦¦e.keyCode; 
 /* reject initial shift use */ 
 if(code==16) return; 
 var shift = e.shiftKey;
 //alert('code: '+code+'\n'+'shift: '+shift+'\n'+'txt: '+txt) 
 if (shift) {MM_changeProp('fieldone','','value',txt,'INPUT/TEXT');}
 else {MM_changeProp('fieldtwo','','value',txt,'INPUT/TEXT');}
}

Many thanks for all your help, much appreciated! : )

Regards,

RJW