用于阻止Shitf + 5的正宗Javascript代码，即在美国邮政编码验证的任何文本字段中的％符号[关闭]

Question

我在Google上搜索了很多代码，但在任何文本字段中按%键组合时，阻止键入Shift + 5符号都没用。

在Chrome和IE浏览器中是否没有可以实际执行此操作的代码，几乎所有最新版本都有效？

我想为Zipcode验证执行此操作，其中要求是，不应允许用户键入除数字之外的任何内容，并且只能编辑和删除数字。

我尝试下面的代码和许多keyCodes来阻止这个，但当我在相关的文本字段中键入Shift + 5时，它仍然键入%符号：

if ( key < 48 || key > 57 || event.charCode == 37 || event.which == 37 || event.which == 16 || event.which == 163) {
        event.preventDefault();
        return false;
    }

有人可以帮忙吗？

Answer 1

您必须测试shiftKey以及keyCode的布尔结果，并且您需要在keydown事件上进行测试，而不是keypress，因为只有可打印字符触发keypress而SHIFT不是可打印字符。

var txt = document.querySelector("input");

txt.addEventListener("keydown", function(evt){
  if(evt.shiftKey && evt.keyCode === 53){
    evt.preventDefault();
  }
});

<input type="text">

并且，如下面评论中所述，这不会完全阻止%标志被输入，所以你可能想要这样的东西：

var txt = document.querySelector("input");

// Prevent % from staying in value
txt.addEventListener("input", function(evt){
  this.value = this.value.replace(/%+/g, "");
});

<input type="text">

更新：

您已声明：我想为美国邮政编码（仅限5位数）验证目的执行此操作，因此，为什么不在正常文本字段上使用正则表达式或在文本字段上使用pattern属性：

var txt1 = document.getElementById("t1");


// Prevent % from staying in value
txt1.addEventListener("change", function(evt){
  this.value = this.value.match(/^\d{5}$/) ? this.value : "invalid zip code";
});

:invalid { background-color:rgba(255, 0, 0, .4); }

<input type="text" id="t1">
<input type="text" id="t2" pattern="^\d{5}$">