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

Question

HTML5是否有任何类型的文本字段屏蔽，还是我还要陷阱onkeydown等？

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

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

这有一些优点：

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

但它的主要缺点是它在删除它们之前会短暂地显示出类型字符，这使得它看起来非常h​​ackish和不专业。

Answer 1

查找新的HTML5 Input Types。这些指示浏览器执行客户端数据过滤，但实现在不同浏览器中是不完整的。 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. <强>的maxlength ： <input type="text" maxlength="20" />

5. min＆amp;最大： <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>

有关插件http://www.jasny.net/bootstrap/javascript/#inputmask

的更多信息

Answer 5

使用此JavaScript。

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