Pièces: Javascript Note 3

In Mozilla, the order of events for keystrokes are

keydown event. At this point only modification keys are recorded.
keypress event. At this point the main key is recorded.
keyup event. At this point only modification keys are available.
Element updated.

Notice the different events for pressing Ctrl-Shift G and Ctrl-Alt G. It depends on key timing. The various key codes are not ASCII key codes but DOM key codes (see KeyboardEvent). Also Mozilla warns that the keyCode attribute of printable keys in keydown and keyup event handlers should not be used.

Examples

Notice the keyCode is G even though the charCode is g.

keydown :ALT keyCode[ (18)], charCode[(0)]
keydown :ALT-SHIFT keyCode[ (16)], charCode[(0)]
keydown :ALT-SHIFT keyCode[G(71)], charCode[(0)]
keypress:ALT-SHIFT keyCode[(0)], charCode[G(71)]
keyup   :ALT-SHIFT keyCode[G(71)], charCode[(0)]
keyup   : keyCode[ (16)], charCode[(0)]

keydown :CTRL keyCode[ (17)], charCode[(0)]
keydown :CTRL-ALT keyCode[ (18)], charCode[(0)]
keydown :CTRL-ALT keyCode[G(71)], charCode[(0)]
keypress:CTRL-ALT keyCode[(0)], charCode[g(103)]
keyup   :CTRL-ALT keyCode[G(71)], charCode[(0)]
keyup   :ALT keyCode[ (17)], charCode[(0)]

Typing apostophe (') (ASCII code 39) corresponds to DOM keycode 222. Javascript's String.fromCharCode translates numeric codes to UTF-8 characters. In UTF-8, 222 corresponds to capital Thorn (Þ) which is a letter used in Old English and still used in Icelandic.
```
keydown : keyCode[Þ(222)], charCode[(0)]
keypress: keyCode[(0)], charCode['(39)]
keyup   : keyCode[Þ(222)], charCode[(0)]
```

Typing "one" results in

keydown : keyCode[O(79)], charCode[(0)] value[]
keypress: keyCode[(0)], charCode[o(111)] value[]
keydown : keyCode[N(78)], charCode[(0)] value[o]
keypress: keyCode[(0)], charCode[n(110)] value[o]
keyup   : keyCode[O(79)], charCode[(0)] value[on]
keyup   : keyCode[N(78)], charCode[(0)] value[on]
keydown : keyCode[E(69)], charCode[(0)] value[on]
keypress: keyCode[(0)], charCode[e(101)] value[on]
keyup   : keyCode[E(69)], charCode[(0)] value[one]

Notice, the full value of the input field is available only on keyup.

Code Snippet:

<html>
<head>
<style>
b { color: blue; }
</style>
<script type="text/javascript">
function msg(e, txt) {
  var mydiv = document.getElementById("result");
  
  var modifier = [];
  [[e.ctrlKey,"CTRL"], [e.altKey, "ALT"],
   [e.metaKey, "META"], [e.shiftKey, "SHIFT"],
   [e.getModifierState("OS"), "OS"], [e.getModifierState("CapsLock"),"Caps"]].forEach(
     function (x) {
        if (x[0]) {
          modifier.push(x[1]);
        }
     }
  );
  var txt = mydiv.innerHTML + "<br/>"
          + txt + ":<b>" + modifier.join("-") + "</b>"
          + " keyCode[<b>" + String.fromCharCode(e.keyCode) + "</b>(" + e.keyCode +")],"
          + " charCode[<b>" + String.fromCharCode(e.charCode) + "</b>(" + e.charCode+")]";
  
  if (document.getElementById("includeValue").checked) {
      txt = txt + " value[" + document.getElementById("maininput").value + "]";
  }
  
  mydiv.innerHTML = txt;
}

function clearResult(e) {
  document.getElementById("result").innerHTML = "";
  document.getElementById("maininput").value = "";
}

</script>
</head>
<body>

<form>
<input id="maininput"
       type="text" size="80"
       onkeyup=   "msg(event, 'keyup &nbsp;&nbsp;')"
       onkeydown= "msg(event, 'keydown ')"
       onkeypress="msg(event, 'keypress')">
</input>
<input id="includeValue" type="checkbox">Include Value</input>
<input type="button" value="Clear" onclick="clearResult(event)"/>
<br/>
<div id="result" style="font-family:monospace">
</div>
</form>

</body>
</html>

Pièces

Label Cloud

Monday, November 19, 2012

Javascript Note 3

1 comment: