关于javascript：如何使用JS或jQuery完全检测不可见的键（ENTER，F1，SHIFT）？


How to detect non-visible keys (ENTER, F1, SHIFT) altogether using JS or jQuery?

首先，对不起，我不知道该怎么称呼这些键(回车键、F1键、Home键等)。

实际上，我正在创建一个输入搜索框，onkeyup调用一个函数。当用户输入至少两个键时，调用我的函数，并使用Ajax显示相关的搜索结果。问题是，当用户按箭头键、Home、End等时，我的Ajax也会被调用，这是我不想要的。当关注输入时，按F5键重新加载页面，而不是重新加载页面，而是调用Ajax，这就是为什么它对我来说是一个大问题。

1
2
3
4
5
$('input[name=\'search\']').on(keyup, function(e) {
  if ($('input[name=\'search\']').val().length >= 2) {
    // call ajax to display results..
  }
});

我想在if中添加一个额外的表达式，检查是否按了不可见键。像-

1
2
3
if ($('input[name=\'search\']').val().length >= 2 && (EXPRESSION FOR VISIBLE KEYS)) {
  // call ajax to display results..
}

如果按下任何可见键，则调用Ajax，否则将不调用。

我不知道如何做到这一点。因为我不能对每个键(如a、b、c、、=、+、1、2、3等)执行e.keycode == '65'。

是否有现成的库来检查这个或任何其他方法？请帮帮我。

相关讨论

您可以检查e.which或e.keyCode是否在48到90之间，这与字母表中的任何数字或字母相对应。http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes网站

if (+e.which >= 48 && +e.which <=90){ ... }

如果您想支持其他只学习字母数字的代码，我能看到的最简单的方法是创建一个包含您想要白名单的所有键代码的数组，并检查数组是否包含键代码。这是一个如何做到这一点的好线索：如何在javascript/jquery中查找数组是否包含特定字符串？

事件keyCode是您的答案：

1
2
3
$('input[name=\'search\']').keyup(function(event) {
   console.log( event.keyCode );
});

例如，enter键的keyCode是13。还可以通过以下变量检查ctrl、shift和alt键：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if(event.ctrlKey) {
      if (event.ctrlLeft) {
        console.log('ctrl-left');
      }
      else {
        console.log('ctrl-right');
      }
}
event.altKey
...
event.altLeft
...
event.shiftKey
...

对于只接受信件，您可以使用以下方式：

1
2
3
4
var letter = String.fromCharCode(e.which);
if (/[a-z\d]/i.test(letter)) {
    // send ajax call
}
相关讨论

我有另一个解决方案来检查是否按了可见字符键。实际上，我在代码中使用的基本功能是，按下可见字符键将更改输入字段值的length。我使用keydown而不是keyup在按下当前键之前获取字符串的长度。看看我的密码-

1
2
3
4
5
6
7
8
9
10
11
$('input[name=\'search\']').on('keydown', function() {
      var orig_len = $('input[name=\'search\']').val().length; // this gets the original length just before the key was pressed
      setTimeout(function() {
          if ($('input[name=\'search\']').val().length >= 2 && $('input[name=\'search\']').val().length != orig_len) {
            // my ajax call
          }, 25);
        /* in 25ms the lenght is updated and the if checks
        whether length has changed from previous or not
        because visible char key changes length
        */
      });

setTimeout是必需的，因为这25毫秒的时间足以在按下当前键后更新输入字段的长度。

请对此进行讨论，并告诉我它是否正常或有一些不良影响，或者可能导致不同浏览器出现问题，因为我还没有在其他浏览器上检查过它。

更新：它在所有主要浏览器上都能正常工作。它按我想要的方式工作。

另一个答案是一个很好的javascript组件来实现高级搜索框，比如typeahead组件，easy peasy；)

请看一下：https://twitter.github.io/typeahead.js/示例/

相关讨论