Javascript 在 HTML(5) 文本输入中屏蔽字符的最简单方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10887645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Easiest way to mask characters in HTML(5) text input
提问by devios1
Does HTML5 have any kind of text field masking or do I still have to trap onkeydownetc.?
HTML5 是否有任何类型的文本字段掩码，还是我仍然需要陷阱onkeydown等？
jbabey is right--"masking" as in blocking certain illegal characters, not hiding what's typed.
jbabey 是对的——“屏蔽”就像阻止某些非法字符，而不是隐藏输入的内容。
The best (as in simplest and most reliable) way I've found is to trap onkeyupand then just run a regex replace on the value of the textfield, removing any illegal characters.
我发现的最好的（最简单和最可靠的）方法是捕获onkeyup，然后对文本字段的值运行正则表达式替换，删除任何非法字符。
This has a few advantages:
这有几个优点：
- It's easy to implement (one function, two lines of code).
- It's reliable and covers all cases I've thought of.
- It doesn't block key commands like copy/paste, select all or arrow keys.
- 它很容易实现（一个功能，两行代码）。
- 它是可靠的，涵盖了我想到的所有情况。
- 它不会阻止诸如复制/粘贴、全选或箭头键之类的键盘命令。
But its major disadvantage is it shows the typed character(s) briefly before removing them, which makes it look very hackish and unprofessional.
但它的主要缺点是它在删除之前简要显示键入的字符，这使它看起来非常hackish 和不专业。
采纳答案by saluce
Look up the new HTML5 Input Types. These instruct browsers to perform client-side filtering of data, but the implementation is incomplete across different browsers. The patternattribute will do regex-style filtering, but, again, browsers don't fully (or at all) support it.
查找新的HTML5 输入类型。这些指示浏览器执行客户端数据过滤，但在不同浏览器之间的实现是不完整的。该pattern属性将执行 regex 样式的过滤，但同样，浏览器并不完全（或根本）不支持它。
However, these won't block the input itself, it will simply prevent submitting the form with the invalid data. You'll still need to trap the onkeydownevent to block key input before it displays on the screen.
但是，这些不会阻止输入本身，它只会阻止提交带有无效数据的表单。onkeydown在它显示在屏幕上之前，您仍然需要捕获事件以阻止键输入。
回答by saluce
Basic validation can be performed by choosing the type attributeof input elements. For example:
<input type="email" /> <input type="URL" /> <input type="number" />using patternattribute like:
<input type="text" pattern="[1-4]{5}" />requiredattribute
<input type="text" required />maxlength:
<input type="text" maxlength="20" />min & max:
<input type="number" min="1" max="4" />
可以通过选择输入元素的类型属性来执行基本验证。例如：
<input type="email" /> <input type="URL" /> <input type="number" />使用模式属性，如：
<input type="text" pattern="[1-4]{5}" />必需属性
<input type="text" required />最大长度：
<input type="text" maxlength="20" />最小值和最大值：
<input type="number" min="1" max="4" />
回答by Jukka K. Korpela
Yes, according to HTML5 drafts you can use the patternattribute to specify the allowed input using a regular expression. For some types of data, you can use special input fields like <input type=email>. But these features still widely lack support or have qualitatively poor support.
是的，根据 HTML5 草案，您可以使用该pattern属性通过正则表达式指定允许的输入。对于某些类型的数据，您可以使用特殊的输入字段，例如<input type=email>. 但是这些功能仍然普遍缺乏支持或质量较差的支持。
回答by Stephen Romero
A little late, but a useful plugin that will actually use a mask to give a bit more restriction on user input.
有点晚了，但是一个有用的插件，它实际上会使用掩码来对用户输入进行更多限制。
<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>
More info on the plugin https://www.jasny.net/bootstrap/2.3.1/javascript.html#inputmask
有关插件的更多信息https://www.jasny.net/bootstrap/2.3.1/javascript.html#inputmask
回答by Ravi Desai
Use this JavaScript.
使用此 JavaScript。
$(":input").inputmask();
$("#phone").inputmask({"mask": "(999) 999-9999"});
