仅接受数字和 + 符号的 HTML 输入

Question

我正在尝试为只接受数字和加号 (+) 的电话号码构建自定义文本输入；所有其他字符都需要被丢弃，并且不会显示在该字段上。

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

• 使用 onkeypress 事件并查看 event.key 来确定按下了哪个键：在 Chrome 上不起作用（请参阅 http://caniuse.com/keyboardevent-key）。有没有跨浏览器的解决方法？

• 使用 onkeycode 事件并查看 event.keyCode: 当我们需要按多个键来打印一个字符时（例如，英文键盘布局需要按 Shift 和= 给 +)。此外，它还允许出现诸如 !@#$%^&*() 之类的字符，因为这些字符在按下 Shift 和数字时出现。 （这是JavaScript keycode allow number and plus symbol only 中采用的方法，但对我没有多大帮助；））

• 使用 HTML 模式属性：这似乎并没有真正阻止人们写出他们喜欢的任何东西。

谢谢！

Answer 1

还有另一种解决方案，您可以使用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 来显示智能手机或平板电脑中的默认数字键盘。

电话：html5 用于输入电话号码的控件；换行符会自动从输入值中删除，但不会强制执行其他语法。您可以使用 pattern 和 ma​​xlength 等属性来限制在控件中输入的值。 :valid 和 :invalid CSS 伪类将酌情应用。

参考：MDN <input>

Answer 2

始终尝试进行服务器端验证，这是为了“帮助”用户，而不是验证数据，（您可以随时打开控制台并根据需要更改输入值的值）

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

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

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

Answer 3

我建议你看看这个项目。 https://github.com/igorescobar/jQuery-Mask-Plugin/

您可以按原样使用它： $('.phone').mask('0000-0000'); 示例：https://igorescobar.github.io/jQuery-Mask-Plugin/

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

Answer 4

这种强大的通用方法的灵感来自@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'>

Answer 5

使用输入

type="tel" 或 "phone"

它在手机中显示默认数字键盘。

希望这会有所帮助:)

Answer 6

结合使用 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/

这似乎适用于数字、+ 字符以及用户退格输入元素时。

Answer 7

您的输入应如下所示：

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

这是众多可能的解决方案之一。