我正在尝试为电话号码构建一个只接受数字和加号(+)的自定义文本输入；所有其他字符都需要丢弃，并且不显示在字段上。
我正在尝试使用事件处理程序(onkeydown/onkeypress)并丢弃与其他键对应的输入。然而，我无法找到一种跨浏览器的方法。以下是我尝试过但没有成功的方法：
-
使用onkeypress事件并查看event.key来确定按下了哪个键：在Chrome上不起作用(请参阅http://caniuse.com/keyboardevent-key)。有没有跨浏览器的解决方法？
-
当我们需要按多个键来打印一个字符时，使用onkeycode事件并查看事件.keyCode:不起作用(例如，英文键盘布局需要按Shift和=才能给出+)。此外，它还允许使用诸如！@#$%之类的字符Ş&()，如按下Shift键和数字时显示的那样。(这是JavaScript中遵循的方法，键代码只允许数字和加号，但对我没有多大帮助；)
-
使用HTML模式属性：这似乎并不能真正阻止人们随心所欲地写作。
谢谢！
还有另一种解决方案，您可以使用Array.prototype.filter()来删除坏字符，并使用Array.prototype.join()在将字符串插入输入之前重新创建字符串。
您可以使用oninput事件。当用户在<input>字段中写入内容时，它会执行JavaScript。
参见下面的示例
var inputEl = document.getElementById('tel');
var goodKey = '0123456789+ ';
var checkInputTel = function(e) {
var key = (typeof e.which == "number") ? e.which : e.keyCode;
var start = this.selectionStart,
end = this.selectionEnd;
var filtered = this.value.split('').filter(filterInput);
this.value = filtered.join("");
/* Prevents moving the pointer for a bad character */
var move = (filterInput(String.fromCharCode(key)) || (key == 0 || key == 8)) ? 0 : 1;
this.setSelectionRange(start - move, end - move);
}
var filterInput = function(val) {
return (goodKey.indexOf(val) > -1);
}
inputEl.addEventListener('input', checkInputTel);<input type='tel' id='tel' />注意：我使用输入类型tel在智能手机或平板电脑中显示默认数字键盘。
tel:html5用于输入电话号码的控件；换行符会自动从输入值中删除，但不会强制执行其他语法。您可以使用pattern和maxlength等属性来限制在控件中输入的值。根据需要应用：valid和：invalid CSS伪类。
参考：MDN<input>
始终尝试进行服务器端验证，这是为了"帮助"用户，而不是验证数据
现在，我要使用的方法是：
在更改时检查整个输入的值，并使该值通过正则表达式来清除不需要的字符，同时跟踪"文本光标"在的位置
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
我建议你看看这个项目。https://github.com/igorescobar/jQuery-Mask-Plugin/
您可以按原样使用它：$('.phone').mask('0000-0000');示例：https://igorescobar.github.io/jQuery-Mask-Plugin/
或者你可以阅读源代码，看看他们是如何解决的
这种稳健的通用方法受到@R3tep答案的启发。它允许通过类似于模式属性的data-filter属性定义regexp模式：
// 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'>使用输入
type="电话"或"电话">
它显示手机中的默认数字键盘。
希望这将有所帮助：)
使用keyup事件侦听器、一些RegEx/String比较方法和一个中间变量的组合，我能够得出以下结果：
var ele = document.getElementById('phone');
var curr = "";
var regexPatt = /^(0|[1-9][0-9]*)$/;
ele.addEventListener('keyup',function(e){
var code = e.keyCode || e.which;
if(this.value.match(regexPatt) || this.value.indexOf('+') > -1 || code == 8){
curr = this.value;
this.value = curr;
} else {
this.value = curr;
}
});
看看小提琴：https://jsfiddle.net/Lg31pomp/2/
这似乎适用于数字、+字符以及用户对输入元素的退格。
您的输入应该如下所示：
<input type="text" onkeypress='return isNumberKey(event);'>
这是脚本：
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
console.log(charCode);
if (charCode != 43 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}
这是众多可能的解决方案之一。