停止输入表单的字符答案

【问题标题】：Stop characters being typed into form停止输入表单的字符
【发布时间】：2012-05-11 01:22:03
【问题描述】：

我有这个 jQuery，它可以阻止按下回车键，并且我已经准备好接受一个不允许的按键数组..

    $('.form input').bind('keypress', function(e) {
        var keys = [13];
        for (var i = keys.length; i--;){
            if(e.keyCode===keys[i]){
                return false;
            }
        }
    });

我想用 | 字符做类似的事情，但由于它是 220 的转变，我不需要阻止 \ 进入表单，我如何限制该字符或使用修饰键？（当然也会在服务器端处理它）。

我也知道特殊字符的键盘布局可能因不同的本地化键盘而异，因此可能需要关注生成的字符而不是键本身（对此并不完全确定），但我不想引入大量开销

【问题讨论】：

有特殊的shift键。 e.shiftKey。 stackoverflow.com/questions/3781142/…
有特殊的shift键。出于您的目的，您可以使用 e.shiftKey。此 SO Q+A 使用 shift 进行解释：stackoverflow.com/questions/3781142/…。您可以将 e.shiftKey 与 \ 的键码检查结合使用，其中 \ 加上 shift = |。正如其他人所说，这仅适用于标准的美国布局和任何其他键盘支持 shift+\=|和这些代码。
取决于键盘。
据我所知，管道（|）是124，而反斜杠（\）是92。
你可以改用正则表达式吗？

标签： javascript jquery forms keyboard jquery-events

【解决方案1】：

keypress 事件是关于字符，而不是键。您可以直接将keyCode 与"|" ("|".charCodeAt(0)) 的字符代码进行比较，无需担心shift 键被按下（并且可能并非在所有键盘上都有）。

示例 - live copy | source:

HTML：

<p>Try to type | in the box below.</p>
<input id="theInput" type="text" size="80">

JavaScript：

jQuery(function($) {

  var keys = [13, "|".charCodeAt(0)];
  $("#theInput").keypress(function(e) {
    var index;

    for (index = 0; index < keys.length; ++index) {
      if (keys[index] === e.keyCode) {
        display("Denied!");
        return false;
      }
    }
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

或者bažmegakapa points out，既然你已经在使用jQuery，你可以使用它的inArray函数：

jQuery(function($) {

  var keys = [13, "|".charCodeAt(0)];
  $("#theInput").keypress(function(e) {
    if ($.inArray(e.keyCode, keys) !== -1) {
      display("Denied!");
      return false;
    }
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

【讨论】：

我从未听说过 character.charCodeAt(0)，但那太棒了。与尝试查看一堆数字键码相比，节省了大量时间，并且作为代码更容易阅读。
应该是$.inArray(e.keyCode, keys) >= 0，因为如果没有找到它会返回-1。

【解决方案2】：

管道的键码是124，所以这应该可以正常工作：

$('.form input').bind('keypress', function(e) {
    var keys = [13, 124];
    for (var i = keys.length; i--;){
        if(e.keyCode===keys[i]){
            return false;
        }
    }
});

Check out the demo

如果你仍然使用 jQuery，你可以使用inArray() 方法：

$('.form input').bind('keypress', function(e) {
    var keys = [
        13, // enter
        124 // |
    ];
    return $.inArray(e.keyCode, keys) === -1;
});

【讨论】：

谢谢！我没有在我找到的键码列表上看到管道，并得出结论，它一定是因为它需要一个修饰键。您的键码列表来自哪里，希望有这个！
@Damon 老实说，我创建了一个 jsFiddle，它只是将我按下到控制台的键的键码记录下来:)。

【解决方案3】：

总之，最好的解决方案是：

var keys = [13, "|".charCodeAt(0)];
$(".form input").keypress(function(e) {
    return $.inArray(e.keyCode, keys) === -1;
});

【讨论】：

【解决方案4】：

您可以检查e.shiftKey 是否为真，但这需要您修改数组。我个人会使用类似的东西：

var mod = {
    NONE:0,
    SHIFT:1,
    CTRL:2,
    ALT:4
};
var keys = [
    [13,mod.NONE], // enter, no mod
    [220,mod.SHIFT] // \ with Shift = |
];
for( var i=keys.length; i--;) {
    if( e.keyCode === keys[i][0] && (e.shiftKey + 2*e.ctrlKey + 4*e.altKey) === keys[i][1]) {
        return false;
    }
}

【讨论】：

只为特定的键盘布局编写代码似乎不是一个好主意。

【解决方案5】：

如果您只是想不包含特定字符（甚至是一组字符），我认为更好的方法是从表单值中删除任何受限字符。

$('.form input').keyup(function(e){ $(this).val( $(this).val().replace("|", "" ) ); });

【讨论】：

在我看来，这会导致非常糟糕的用户体验。
出于多种原因，尤其是当您替换值时光标会跳来跳去。所以输入一个 |把你放在开头或结尾等等。只是不好的用户体验。当有一个显着更好的方法时，为什么不使用它呢？
是的，这不是一个好的界面。请注意，当我使用 Firefox 进行测试时，这并没有发生在我身上。光标停留在 |字符在被删除之前。