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

Question

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

我指的粘贴是鼠标粘贴和键盘粘贴。粘贴一般。我试图弄清楚这一点，但我似乎无法找到一种方法来做到这一点。

这是我的代码。

//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(){
  //???
}

<input type="text" id='numbers-only'>

Answer 1

给你。

您可以创建一个无效字符列表以防止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;
}

<input type="number" id="numbers-only" />