JavaScript - разрешать только цифры из вставки без использования jQuery - PullRequest
Новая
       43

JavaScript - разрешать только цифры из вставки без использования jQuery

0 голосов
/ 07 июня 2018

У меня есть этот скрипт, который позволяет набирать только цифры, и все работает отлично, но я хочу иметь возможность вставлять только цифры, если пользователь решит использовать вставку во входных данных.

Паста, о которой я говорю, это 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'>

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

Вот, пожалуйста.

Вы можете создать список 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" />
0 голосов
/ 07 июня 2018

Поскольку это ввод, вы можете легко изменить тип ввода на число.Веб-браузер позаботится о том, чтобы разрешать только цифры. 

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