只接受数字和+符号的HTML输入
只接受数字和+符号的HTML输入
提问于 2016-05-23 20:09:41
我正在尝试为电话号码构建一个自定义文本输入，它只接受数字和加号(+)；所有其他字符都需要丢弃，并且不显示在字段中。
我正在尝试使用事件处理程序(onkeydown/onkeypress)并丢弃与其他键相对应的输入。然而，我想不出一种跨浏览器的方法。以下是我尝试过但不起作用的方法：
- Using onkeypress事件，并查看event.key以确定按下了哪个键:在Chrome上不起作用(参见http://caniuse.com/keyboardevent-key)。当我们需要按多个键来打印一个字符时(例如，英文键盘布局需要按Shift键和=键才能给出+)，是否存在跨浏览器workaround?
- Using onkeycode事件和查看event.keyCode:不起作用。此外，它还允许显示诸如!@#$%ˆ&*()之类的字符，就像按Shift和数字时出现的字符一样。(这是在JavaScript keycode allow number and plus symbol only中遵循的方法，但它对HTML pattern属性没有多大帮助：这似乎并没有真正阻止人们编写他们想要的任何东西。
谢谢!
回答 6
Stack Overflow用户
发布于 2016-05-23 20:54:40
始终尝试进行服务器端验证，这意味着“帮助”用户，而不是验证数据(您可以随时打开控制台并随心所欲地更改输入值的值)
现在，我将使用的方法是：
在更改时检查整个输入的值，并使该值通过正则表达式清除不需要的字符，同时跟踪“文本光标”的位置
const tel = document.getElementById('tel');
tel.addEventListener('input', function() {
let start = this.selectionStart;
let end = this.selectionEnd;
const current = this.value
const corrected = current.replace(/([^+0-9]+)/gi, '');
this.value = corrected;
if (corrected.length < current.length) --end;
this.setSelectionRange(start, end);
});<input type="tel" id="tel">
你可以根据你想要的来创建一个更“准确”的正则表达式，这里有一个很好的工具：RegExr
Stack Overflow用户
发布于 2016-05-23 20:17:43
我建议你看看这个项目。https://github.com/igorescobar/jQuery-Mask-Plugin/
您可以按原样使用它：$('.phone').mask('0000-0000');示例：https://igorescobar.github.io/jQuery-Mask-Plugin/
或者你可以阅读源代码，看看他们是如何解决这个问题的。
Stack Overflow用户
发布于 2016-05-25 02:35:23
这种健壮的通用方法的灵感来自@R3tep的答案。它允许通过类似于pattern attribute的data-filter属性定义正则表达式模式
// Apply filter to all inputs with data-filter:
let inputs = document.querySelectorAll('input[data-filter]');
for (let input of inputs) {
let state = {
value: input.value,
start: input.selectionStart,
end: input.selectionEnd,
pattern: RegExp('^' + input.dataset.filter + '$')
};
input.addEventListener('input', event => {
if (state.pattern.test(input.value)) {
state.value = input.value;
} else {
input.value = state.value;
input.setSelectionRange(state.start, state.end);
}
});
input.addEventListener('keydown', event => {
state.start = input.selectionStart;
state.end = input.selectionEnd;
});
}<input type='tel' data-filter='[0-9|+]*' placeholder='123+456'>
<input type='tel' data-filter='(\+|(\+[1-9])?[0-9]*)' placeholder='+10123'>
<input type='text' data-filter='([A-Z]?|[A-Z][a-z]*)' placeholder='Abcdefg'>
<input type='text' data-filter='([A-Z]{0,3}|[A-Z]{3}[0-9]*)' placeholder='ABC123'>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37390665
复制相关文章
相似问题