Question

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

我所指的粘贴是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(){
  //???
}

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

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

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

Answer 2

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

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

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

2 个答案: