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

Posted 2023-03-16

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

【英文标题】：Easiest way to mask characters in HTML(5) text input

【发布时间】：2012-06-08 21:36:37

【问题描述】：

html5 是否有任何类型的文本字段屏蔽，还是我仍然需要捕获 onkeydown 等？

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

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

这有几个优点：

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

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

【问题讨论】：

为什么不 input of type="password" ？

问题可能意味着只允许某些字符出现在文本字段中，例如电话输入的数字和 (-)

我认为他的意思是mask，而不是mask

除非您想要下面讨论的 reg-ex 样式过滤，否则仍然必须执行 onkeydown（请参阅 ***.com/questions/15728261/…）。

【参考方案1】：

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

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

【讨论】：

为了提高答案，应该举一个捕获onkeydown的例子。

【参考方案2】：

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

使用 pattern 属性，例如： <input type="text" pattern="[1-4]5" />

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

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

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

【参考方案3】：

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

【讨论】：

啊太棒了！这正是我希望有的事情。我的谷歌搜索没有出现任何东西。不幸的是，它似乎还没有被广泛采用。

@chaiguy，来自W3C Working Draft 29 March 2012的attr-input-pattern！

不幸的是，规范似乎只定义了元素何时遭受模式不匹配，而不是浏览器应该如何处理它。理想情况下，它会阻止输入发生，但它可能只会导致红色边框或类似的东西。

【参考方案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="[phone]"placeholder>
    <span class="help-block">[phone]</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的更多信息

【参考方案5】：

使用这个 JavaScript。

$(":input").inputmask();
$("#phone").inputmask("mask": "[phone]");