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

Question

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

jbabey是正确的 - "屏蔽",如阻止某些非法字符,而不是隐藏所输入的内容.

我发现最好的(最简单和最可靠)方法是陷阱onkeyup然后只运行正则表达式替换文本字段的值,删除任何非法字符.

这有一些优点:

1. 它很容易实现(一个函数,两行代码).
2. 它可靠,涵盖了我所想到的所有情况.
3. 它不会阻止复制/粘贴等关键命令,选择全部或箭头键.

但它的主要缺点是它在删除之前会短暂地显示出键入的字符,这使得它看起来非常h​​ackish和unprofessional.

Answer 1

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

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

Answer 2

1. 可以通过选择输入元素的type属性来执行基本验证.例如: <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