Javascript 在HTML（5）文本输入中屏蔽字符的最简单方法

HTML5是否有任何类型的文本字段屏蔽，或者我是否仍然必须捕获

onkeydown

等

jbabey是对的——“屏蔽”是指阻止某些非法字符，而不是隐藏键入的内容

我发现的最好的（最简单、最可靠的）方法是trap

onkeyup

，然后对textfield的值运行regex replace，删除任何非法字符

这有几个优点：

它很容易实现（一个函数，两行代码）

它是可靠的，涵盖了我想到的所有案例

它不会阻止复制/粘贴、全选或箭头键等关键点命令

---

但它的主要缺点是，在删除键入的字符之前，它会短暂地显示这些字符，这使得它看起来非常粗糙和不专业。

是的，根据HTML5草稿，您可以使用

模式

属性使用正则表达式指定允许的输入。对于某些类型的数据，可以使用特殊的输入字段，如

。但是这些功能仍然普遍缺乏支持，或者支持质量很差。

查看新功能。这些命令指示浏览器执行数据的客户端过滤，但是在不同的浏览器中实现是不完整的。

pattern

属性将执行正则表达式风格的过滤，但浏览器也不完全（或根本不）支持它

然而，这些不会阻止输入本身，它只会阻止提交包含无效数据的表单。您仍然需要捕获

onkeydown

事件以阻止按键输入，然后它才会显示在屏幕上

通过选择输入元素的类型属性，可以执行基本验证。例如：

使用模式属性，如：

必需属性

maxlength：

最小值和最大值：

---

有点晚了，但这是一个有用的插件，它实际上会使用一个掩码来限制用户输入

<div class="col-sm-3 col-md-6 col-lg-4">
  <div class="form-group">
     <label for="addPhone">Phone Number *</label>
      <input id="addPhone" name="addPhone" type="text" class="form-control 
       required" data-mask="(999) 999-9999"placeholder>
    <span class="help-block">(999) 999-9999</span>
  </div>
</div>

 <!-- Input Mask -->
 <script src="js/plugins/jasny/jasny-bootstrap.min.js"></script>

电话号码*
(999) 999-9999

有关插件的更多信息请使用此JavaScript

$(":input").inputmask();
$("#phone").inputmask({"mask": "(999) 999-9999"});

---

为什么不输入

type=“password”

？这个问题可能意味着只允许某些字符出现在文本字段中，例如电话输入的数字和（-）我想他的意思是，除非您想要下面讨论的reg ex风格的过滤，否则不必再进行onkeydown（请参阅）。太好了！这正是我所希望的。我的谷歌搜索没有发现任何东西。不幸的是，它似乎还没有被广泛采用。@chaiguy，来自的

attr输入模式

！不幸的是，规范似乎只定义元素出现模式不匹配的时间，而不是浏览器应该如何处理它。理想情况下，它会阻止输入发生，但它可能只会导致红色边框或类似的愚蠢行为。为了改进答案，应该给出一个捕获onkeydown的示例。