Javascript keycode clash: “right arrow” and “single quote”

后端未结

关注

 4  1201

The following script does what it should, that is, it reacts on the keys \"arrow left\" and \"arrow right\". However, due to a keycode clash, it reacts on a single quote as

相关标签:

4条回答

花落未央

2021-01-14 07:38

Use keydown instread of keypress

jS:

document.onkeydown=function(event){
  if(window.event) event=window.event;
  var keycode=(event.keyCode)?event.keyCode:event.which;
  switch(keycode){
    case 37: alert("an arrow");
      break;
    case 39: alert("another arrow");
      break;
  }
}

Fiddle : http://jsfiddle.net/p9x1Lj4u/2/

0 讨论(0)

-上瘾入骨i

2021-01-14 07:51
As it is a text input, it seems you'd also have a problem when someone is trying to use the arrow keys to move the cursor within the input. Thus, stopping event propagation/bubbling should be used, and can solve the main issue you're asking about.
```
// assuming you've grabbed an input in var input_ele
input_ele.onkeypress = function (e) {
    e = e || window.event;

    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true;
    }
};
```
Using this will stop the keypress event from leaving the input element, thereby never reaching the document element to trigger the unwanted behavior. In other words, you don't break the expected behavior of a very standard control element.
0 讨论(0)
发布评论:

提交评论
- 加载中...

星月不相逢

2021-01-14 07:55

When the user presses the single quote key, the e.keyCode property is zero, and the e.which property is 39. Executing String.fromCharCode(39) returns a single quote.

You want the keyCode if that property is in the event object:

var keycode = "keyCode" in e ? e.keyCode : e.which;

That way you get zero for the keyCode when that property exists in the event object, and when the which property also exists.

document.onkeydown = function(event) {
    event = event || window.event;

    var keyCode = "keyCode" in event ? event.keyCode : event.which;

    switch (keyCode) {
        case 37: console.log("37 was pressed", event); break;
        case 39: console.log("39 was pressed", event); break;
    }
};

Edit #1: Other commenters and answers are correct. I forgot you shouldn't be detecting control keys with keypress events. Changed to onkeydown.

Full HTML example that works cross browser:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Key Codes Test</title>
</head>
<body>
    <script type="text/javascript">
        document.onkeydown = function(event) {
            event = event || window.event;

            var keyCode = "keyCode" in event ? event.keyCode : event.which;

            switch (keyCode) {
                case 37: console.log("37 was pressed", event); break;
                case 39: console.log("39 was pressed", event); break;
            }
        };
    </script>
    <input type="text" size="30">
</body>
</html>

0 讨论(0)

迷失自我

2021-01-14 07:59

keypress should not capture control keys like left/right arrow. if you use keydown event, single quote keycode is 222 definitely no conflict

0 讨论(0)
发布评论:

提交评论
- 加载中...