Question

我正在尝试为仅接受数字和加号（+）符号的电话号码构建自定义文本输入;所有其他角色都需要丢弃并且不会在现场显示。

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

使用onkeypress事件并查看event.key 以确定按下了哪个键：在Chrome上无效（请参阅http://caniuse.com/keyboardevent-key）。是否有任何跨浏览器的解决方法？
当我们需要按多个键来打印字符时，使用onkeycode事件并查看event.keyCode：不起作用（例如，英文键盘布局需要按Shift和=给予+）。此外，它允许出现诸如！@＃$％＆amp; *（）之类的字符，因为按下Shift和数字时会出现这些字符。（这是JavaScript keycode allow number and plus symbol only中遵循的方法，但它对我没有多大帮助;））
使用HTML模式属性：这似乎并不能阻止人们写出他们想要的任何内容。

谢谢！

Answer 1

还有另一种解决方案，您可以使用Array.prototype.filter()删除不良字符，并Array.prototype.join()重新创建字符串，然后再将其插入输入中。

您可以使用oninput活动。当用户在<input>字段中写入内容时，它会执行JavaScript。

见下面的例子

＆＃13;

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

＆＃13;

<input type='tel' id='tel' />

＆＃13;

注意：我使用输入法tel来显示智能手机或平板电脑的默认数字键盘。

tel：html5用于输入电话号码的控件;自动从输入值中删除换行符，但不强制执行其他语法。您可以使用 pattern 和 maxlength 等属性来限制在控件中输入的值。适当时应用: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

使用输入

类型=＆＃34;电话＆＃34;或＆＃34;电话＆＃34;

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

希望这会有所帮助：）

Answer 5

这种强大的通用方法受到@ 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 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;
}

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

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

7 个答案:

类型=＆＃34;电话＆＃34;或＆＃34;电话＆＃34;