Как заблокировать +, -, e в типе ввода Number?

Ответ 1

Попробуйте предотвратить поведение по умолчанию, если вам не нравится значение входящего ключа:

document.querySelector(".your_class").addEventListener("keypress", function (evt) {
    if (evt.which != 8 && evt.which != 0 && evt.which < 48 || evt.which > 57)
    {
        evt.preventDefault();
    }
});

// 0 for null values
// 8 for backspace 
// 48-57 for 0-9 numbers

<input type="number" class="your_class">

Ответ 2

Вы можете заблокировать ввод этих символов с событием keydown

var inputBox = document.getElementById("inputBox");

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

inputBox.addEventListener("keydown", function(e) {
  if (invalidChars.includes(e.key)) {
    e.preventDefault();
  }
});

<input type="number" id="inputBox" />

Ответ 3

Вместо попытки блокировки значений вы можете попытаться заменить значения, которые не являются числовыми.

Если вы решите обрабатывать коды ключей, вам придется обрабатывать numKeys, numPad, shift +, crtl + и т.д. и пытаться обновиться, пока фокус находится внутри текстового поля. Предотвращение по умолчанию останавливает лот больше, чем неправильные значения.

$("#input").on("input", function() {
  var nonNumReg = /[^0-9]/g
  $(this).val($(this).val().replace(nonNumReg, ''));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" id="input" />
<div class="alert"></div>

Ответ 4

Вы можете сделать это легко, используя jQuery

Попробуйте этот код

$(function() {
    $("#input").keypress(function(event) {
        if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
            $(".alert").html("Enter only digits!").show().fadeOut(2000);
            return false;
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="input" />
<div class="alert"></div>

Ответ 5

Поскольку вопрос OP был помечен как "angularjs", самым чистым решением, вероятно, было бы использование директивы. Ранее было предложено несколько решений для этого подхода:

angularjs: позволяет вводить только цифры в текстовое поле

Ответ 6

$("#input").on("input", function() {
  var nonNumReg = /[^0-9]/g
  $(this).val($(this).val().replace(nonNumReg, ''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" id="input" />
<div class="alert"></div>

Ответ 7

Следуя форме из ответов выше, большинство примеров выше покрывают это, я просто заметил, что при вводе "E" это все еще допустимо, поэтому я думаю, что лучше всего добавить это в массив. Я использую Jquery 3.3.1 в этом примере.

Кроме того, все, что вы вводите в массив, не будет введено в поле ввода.

Примечание - возьмите 'elementid' в качестве идентификатора элемента, к которому вы хотите применить это аналогично, если вы хотите применить это ко всем входам, которые являются номерами типа в JQuery → $ ("input [type = 'number']" )

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

$("input[type='number']").on("keydown", function(e){ 
    if(invalidChars.includes(e.key)){
         e.preventDefault();
    }
}):

Этот пример выше должен работать на всех входах с типом числа и не допускать ввода символов "-", "e", "+" и "E".

ОБНОВИТЬ

Также замечает, что вы можете ввести '.' поскольку они представляют десятичные точки, которые действительны для чисел. Я использовал это, чтобы подтвердить номер телефона, и, очевидно, (для Великобритании) "нет". так что это также может быть другой символ, чтобы добавить в ваш массив.

Ответ 8

Самое эффективное и простое решение, которое я нашел:

<input
    type="number"
    name="phone"
    placeholder="Phone number"
    onKeyDown={e => /[\+\-\.\,]$/.test(e.key) && e.preventDefault()}
/>

Ответ 9

Вы можете заблокировать с помощью некоторых кодов JQuery

 $('input[Type="Number"]').keypress(function (e) {
    if ('0123456789'.indexOf(e.key) == -1) {
        e.preventDefault();
    }
});

Это повлияет на все вводимые числа

Ответ 10

Простое решение, которое я использовал в React.

onKeyDown={(evt) => ["e", "E", "+", "-"].includes(evt.key) && evt.preventDefault()}

Ответ 11

<input type="number" onChange={(e) => handleInput(e)}/>

function handleInput(e) {
  let value = e.target.value
  if (value.length > 0) {
    ... do something
  }
}

Ответ 12

Если вы хотите + войти в поле вашего номера телефона, вы можете использовать этот код.

var inputBox = document.getElementById("inputBox");

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

inputBox.addEventListener("keydown", function(e) {
  if (invalidChars.includes(e.key)) {
    e.preventDefault();
  }
});

<input type="number" id="inputBox" />