JavaScript - 只允许粘贴数字而不使用 jQuery答案

【问题标题】：JavaScript - Allow only numbers from paste without using jQueryJavaScript - 只允许粘贴数字而不使用 jQuery
【发布时间】：2018-06-07 00:25:13
【问题描述】：

我有这个脚本，它只允许输入数字并且一切正常，但是如果用户决定在输入中使用粘贴，我希望能够只粘贴数字。

我指的粘贴是mouse paste 和keyboard paste。粘贴一般。我试图弄清楚这一点，但我似乎找不到解决办法。

这是我的代码。

//Prevent non numbers from keypress 
document.querySelector('#numbers-only').addEventListener('keypress',preventNonNumbersInInput);

function preventNonNumbersInInput(event){

  var characters = String.fromCharCode(event.which);

  if(!(/[0-9]/.test(characters))){
    event.preventDefault();
  }

}

//Prevent non numbers from being pasted only numbers can be pasted
document.querySelector('#numbers-only').addEventListener('paste',pasteTest);
function pasteTest(){
  //???
}

&lt;input type="text" id='numbers-only'&gt;

【问题讨论】：

Francescos 回答解决了您的问题 - 任何粘贴到仅输入数字的内容都将删除其余内容，否则不会粘贴任何内容或小写 e 将粘贴 error

标签： javascript validation input

【解决方案1】：

给你。

您可以创建invalid chars 的列表以防止keydown 上的粘贴。

下面是工作代码：

var input = document.getElementById("numbers-only");

var invalidChars = [
  "-",
  "+",
  "e",
  "."
];

input.addEventListener("input", function() {
  this.value = this.value.replace(/[e\+\-]/gi, "");
});

input.addEventListener("keydown", function(e) {
  if (invalidChars.includes(e.key) || e.which === 38 || e.which === 40) {
    e.preventDefault();
  }
});

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

&lt;input type="number" id="numbers-only" /&gt;

【讨论】：

感谢您的建议 VicJordan 但是我怎样才能避免使用数字输入，因为我觉得那些箭头很烦人？您用于更改数字的箭头以及如何避免使用键盘上的箭头更改数字。
@fsofb 更新了答案。现在检查！您可以使用 CSS 隐藏它
如何防止键盘箭头更改输入中的数字，换句话说，当我按下键盘箭头时，我注意到它会更改数字。
@fsofb 更新了disable keyboard arrows as well 的答案。看看吧！
感谢 vicJordan 努力以身作则教我这就是我想要的实际上这是给我的客户的我的客户希望通过文本输入而不是数字输入来完成不同意，恐怕我可能不得不在不使用数字输入的情况下以相同的标题再次问这个问题，但我会给你最好的答案，谢谢。

【解决方案2】：

由于它是一个输入，您可以轻松地将输入类型更改为数字。然后，网络浏览器将负责只允许数字。

<input type="number" id='phone-number'>

【讨论】：

它仍然允许非数字，所以你的建议对我不起作用。是否可以通过粘贴事件做到这一点？
当我粘贴某些东西时它会粘贴 e 或 e's，这很奇怪
@fsofb 看看我的回答。
这是因为 e 用于定义科学概念中的数字或 10^2 10e2
感谢您的建议，但我怎样才能避免使用数字输入，因为我觉得那些箭头很烦人？您用于更改数字的箭头以及如何避免使用键盘上的箭头更改数字。