HTML 仅包含数字和 + 符号的输入

Question

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

我正在尝试使用事件处理程序 (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

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

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

或者您可以阅读源代码并查看他们是如何解决的。

Answer 2

使用输入

类型="tel" 或 "phone"

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

希望这会有所帮助:)

Answer 3

您的输入应如下所示：

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

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

Answer 4

还有另一种解决方案，您可以使用 Array.prototype.filter() to remove the bad characters, and 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 A control for entering a telephone number; line-breaks are automatically removed from the input value, but no other syntax is enforced. You can use attributes such as pattern and maxlength to restrict values entered in the control. The :valid and :invalid CSS pseudo-classes are applied as appropriate.

参考：MDN <input>

Answer 5

结合使用 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;
  }
});

看看fiddle：https://jsfiddle.net/Lg31pomp/2/

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

Answer 6

始终尝试进行服务器端验证，这意味着 'help' 用户，而不是验证数据，（您始终可以打开控制台并更改输入值的值，但是您想要）

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

检查更改时整个输入的值，并使该值通过正则表达式清除不需要的字符，同时跟踪 "text cursor" 的位置

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">

您可以根据需要制作更多 'accurate' 正则表达式，这是一个很好的工具：RegExr

Answer 7

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

HTML 仅包含数字和 + 符号的输入

HTML input that takes only numbers and the + symbol

html

javascript

validation

user-input

类型="tel" 或 "phone"