javascript - 在 HTML(5) 文本输入中屏蔽字符的最简单方法

Question

HTML5 是否有任何类型的文本字段掩码或者我仍然需要捕获onkeydown等？

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

我发现的最好的（最简单和最可靠的）方法是捕获onkeyup然后只对文本字段的值运行正则表达式替换，删除任何非法字符。

这有几个优点：

1. 它很容易实现（一个功能，两行代码）。
2. 它很可靠，涵盖了我想到的所有情况。
3. 它不会阻止复制/粘贴、全选或箭头键等键盘命令。

但它的主要缺点是它会在删除之前简要显示键入的字符，这使它看起来非常生硬和不专业。

Answer 1

查找新的HTML5 输入类型。这些指示浏览器执行数据的客户端过滤，但在不同的浏览器中实现是不完整的。该pattern属性将执行正则表达式样式的过滤，但同样，浏览器并不完全（或根本不）支持它。

但是，这些不会阻止输入本身，它只会阻止提交带有无效数据的表单。您仍然需要在onkeydown事件显示在屏幕上之前捕获事件以阻止键输入。

Answer 2

1. 可以通过选择输入元素的类型属性来执行基本验证。例如： <input type="email" /> <input type="URL" /> <input type="number" />

2. 使用模式属性，如： <input type="text" pattern="[1-4]{5}" />

3. 必需的属性 <input type="text" required />

4. 最大长度： <input type="text" maxlength="20" />

5. 最小值和最大值： <input type="number" min="1" max="4" />

Answer 3

是的，根据 HTML5 草案，您可以使用该pattern属性使用正则表达式指定允许的输入。对于某些类型的数据，您可以使用特殊的输入字段，例如<input type=email>. 但这些功能仍然普遍缺乏支持或质量较差的支持。

Answer 4

有点晚了，但是一个有用的插件，它实际上会使用一个掩码来对用户输入提供更多的限制。

<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>

有关插件的更多信息https://www.jasny.net/bootstrap/2.3.1/javascript.html#inputmask

Answer 5

使用这个 JavaScript。

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