Javascript 只接受数字和+；符号

我正在尝试为电话号码建立一个只接受数字和加号（+）符号的自定义文本输入；所有其他字符都需要丢弃，并且不显示在字段上

我尝试使用事件处理程序（onkeydown/onkeypress）并丢弃与其他键对应的输入来实现这一点。然而，我想不出一个跨浏览器的方法来实现这一点。以下是我尝试过但不起作用的方法：

• 使用onkeypress事件并查看event.key以确定按下了哪个键：在Chrome上不起作用（请参阅）。是否有跨浏览器的解决方法

• 使用onkeycode事件并查看事件。keyCode:在需要按多个键打印字符时不起作用（例如，英文键盘布局需要按Shift和=以给出+）。此外，它还允许使用诸如！@$%之类的字符ˆ&*（）显示，如按下Shift键和数字时显示。（这是中采用的方法，但对我帮助不大；）

• 使用HTML模式属性：这似乎并不能真正阻止人们随心所欲地写作

---

谢谢

我建议你看看这个项目

您可以按原样使用它：

$（'.phone'）.mask（'0000-0000'）
例如：

或者你可以阅读源代码，看看他们是如何解决的。
使用输入

type=“tel”或“phone”
它显示手机中的默认数字键盘

希望这会有所帮助：）
您的输入应该如下所示：

<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;
}

函数isNumberKey（evt）{
var charCode=（evt.which）？evt.which:event.keyCode；
console.log（charCode）；
如果（字符码！=43&&charCode>31
&&（字符编码<48 | |字符编码>57））
返回false；
返回true；
}

这是许多可能的解决方案之一。
还有另一种解决方案，您可以使用它删除坏字符，并在将字符串插入输入之前重新创建字符串

您可以使用事件。当用户在
字段中写入内容时，它会执行JavaScript


见下面的例子


var inputEl=document.getElementById（'tel'）；
var goodKey='0123456789+'；
var checkInputTel=功能（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（“”）；
/*防止移动错误字符的指针*/
var move=（filterInput（String.fromCharCode（key））| | |（key==0 | | key==8））？0:1；
此.setSelectionRange（开始-移动，结束-移动）；
}
var filterInput=函数（val）{
返回（goodKey.indexOf（val）>-1）；
}
inputEl.addEventListener（'input'，CheckInputel）
结合使用
keyup
事件侦听器、一些正则表达式/字符串比较方法和一个中间变量，我能够得出以下结论：

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;
  }
});

看看小提琴：

这似乎适用于数字、
+
字符以及用户对输入元素进行退格操作。
始终尝试进行服务器端验证，这是为了“帮助”用户，而不是验证数据，（您可以随时打开控制台，随意更改输入值的值）

现在，我将使用的方法是：

在更改时检查整个输入的值，并使该值通过正则表达式清除不需要的字符，同时跟踪“文本光标”的位置


const tel=document.getElementById（'tel'）；
tel.addEventListener（'input'，function（））{
让开始=this.selectionStart；
让end=this.selectionEnd；
const current=this.value
const corrected=current.replace（/（[^+0-9]+）/gi，”）；
该值=已纠正；
如果（校正长度<当前长度）--结束；
此.setSelectionRange（开始、结束）；
});
这种健壮的通用方法受到@R3tep答案的启发。它允许通过
数据过滤器
属性定义regexp模式，类似于：


//使用数据筛选器将筛选器应用于所有输入：
让inputs=document.querySelectorAll（'input[data filter]'）；
for（让输入为输入）{
让状态={
value:input.value，
开始：输入。选择开始，
结束：input.selectionEnd，
模式：RegExp（“^”+input.dataset.filter+“$”）
};
addEventListener（'input'，event=>{
if（state.pattern.test（输入值））{
state.value=input.value；
}否则{
input.value=state.value；
input.setSelectionRange（state.start、state.end）；
}
});
input.addEventListener（'keydown'，event=>{
state.start=input.selectionStart；
state.end=input.selectionEnd；
});
}

您可以使用onkeyup事件，获取整个输入，并使用regexp过滤掉任何不需要的字符@evolutionxbox no可能是重复的，它不是重复的。该链接中采用的方法正是我尝试过但不起作用的方法之一。在第一篇文章的第二个要点中解释了它不起作用的原因。这种方法可能不起作用，但问题本质上是一样的。这就是它的复制品。无论如何，@RobinvdA建议的方法很可能是您想要的。@RobinvdA如果您正在对输入值进行regexp'并对其进行清理，则光标将被强制到文本框的末尾，除非您知道跨浏览器保持光标位置的方法。我遇到了很多令人恼火的接口，这些接口不必要地执行这个操作，并且阻止我在文本中间修复某些东西。他们的方法似乎很有趣，但他们在作弊。显然，面具不在乎你按哪个键。如果希望您键入（，则可以