logo标签列表

如何防止在HTML文本输入框中输入分号，但允许冒号输入？

javascriptjqueryhtmlasciikeycode
5
我想允许输入如1:10的格式，但不允许输入1;10。然而，冒号（:）和分号（;）都对应keyCode 186，因此使用keyCode来防止分号输入到我的输入框中是无效的。我还研究了使用charCodes的方法，但charCodes没有分号或冒号的值。最后，我查看了ASCII表。它们有分号和冒号的值。是否有可能使用ASCII表来防止分号键输入到我的文本框中，但允许冒号键？或者是否有其他方法可以让我做到这一点？我还考虑检测连续两个按键，以便我可以检测Shift键输入，但那似乎是一个不太干净的解决方案。
 $("input.form-1").bind({
    keydown: function(e) {
        if(e.which ===186) { //trying to disallow semicolons, which also disallows colons
            return false;
        }
    }
});
1
尝试检查 shiftKey 是否按下。 - Koushik Chatterjee
它们都对应于美国国际或美国英语键盘上的keyCode 186。还有很多其他的键盘布局。这些可能无法正确地使用此方法。 - Peter Bruins
4个回答
5

就像Rory所说的那样，你应该使用on。不必检查shiftKey，你也可以仅检查事件上的key属性。MDN KeyboardEvent.key

$("input.form-1").on({
    keydown: function(e) {
        if(e.key === ";") { // disallow semicolon
            return false;
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-1" type="text" />

2

首先，不要使用bind()。它早已过时。请改用on()。

要解决您的问题，您需要检测是否按下了shift键，可以使用事件的shiftKey属性：

$("input.form-1").on({
  keydown: function(e) {
    if (!e.shiftKey && e.which === 186) {
      return false;
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-1" type="text" />

我认为应该是 !e.shiftKey，因为当 shiftKey 按下时会出现 :，而他想要允许这种情况！ - Koushik Chatterjee
1
我想这假设使用传统的Querty键盘。在每个国家，分号和冒号键总是相同的按键吗？ - Buh Buh
@BuhBuh，如果需要多语言支持，我没有测试过，所以不确定，但你说得对，这是一个问题。在这种情况下，我建议使用@SvenTheSurfer的event.key方法，假设您不需要支持旧版本的IE。 - Rory McCrossan
在欧洲，许多国家的键盘布局将特殊字符如 : 和 ; 放置在不同的位置。 - Peter Bruins
我更喜欢被接受的解决方案，因为它没有使用shiftKey。不过还是谢谢你的帮助，你的答案也很好。 - George Chen
很高兴能够帮忙。只需注意，在旧版本的IE中，event.key不可用。 - Rory McCrossan
1

如果您想要任何字母或符号的按键代码，只需在下面的文本中键入即可尝试 e.keycode，冒号的按键代码为: 58，分号为; 59。

<html>
<body>

<input type="text" size="40" onkeypress="myFunction(event)">

<p id="demo"></p>
<script>
function myFunction(event) {
    var x =  event.keyCode;
    document.getElementById("demo").innerHTML =  x;
}
</script>


</body>
</html>

请注意，由于您正在使用过时的“on *”事件属性，因此此处的keyCode与之不同-这本身就是一个坏主意。在不显眼的处理程序或jQuery中，keycode为186（https://jsfiddle.net/5u8czo29/），正如OP所正确使用的那样。 - Rory McCrossan
每种类型的事件处理程序是否有多个keyCode定义？我看到有些人使用59作为;的keyCode，而其他人则使用186。 - George Chen
0

在 if 条件语句中检查 keycode 和 key。

$("input.form-1").on({
    keydown: function(e) {
        if(e.key === ";") { // disallow semicolon
            return false;
        }
    }
});
为什么要两个都检查？你不相信 e.key === ";" 吗？ - Buh Buh
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接