Не допускайте ввода буквенных символов в поле <input type = number/">

Мне нужно иметь текстовое поле, где, когда набирается внутри, ТОЛЬКО разрешать номера [0-9]. Я использовал type="number", который определенно поддерживает проверку на стороне клиента, но также позволяет вводить другие алфавиты. Я могу сделать это, отслеживая каждое keydown и сопоставляя с регулярным выражением, но мне было интересно, есть ли какой-либо способ, которым я могу ограничиться типом, используя только теги html и НЕ определяя какие-либо функции в JavaScript для сравнения в каждом keydown?

Недопустимый код для этого:

    <input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number">

Любая помощь приветствуется.

Ответы

Ответ 1

Вы можете использовать jquery.numeric плагин.

См здесь аналогичный вопрос.

$(document).ready(function(){
   $(".numeric").numeric();
});

Ответ 2

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

определить функцию javascript

для разрешенного числа с десятичной дробью, как показано ниже

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31
    && (charCode < 48 || charCode > 57))
        return false;

    return true;
}

Функция

для разрешенного числа не десятичная, как ниже

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if ((charCode < 48 || charCode > 57))
        return false;

    return true;
}

HTML

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number" onkeypress="return isNumberKey(event)">

Ответ 3

input type = "number" для получения числовой клавиатуры на мобильном устройстве

ява Script

function numbersonly(myfield, e)
        {
            var key;
            var keychar;

            if (window.event)
                key = window.event.keyCode;
            else if (e)
                key = e.which;
            else
                return true;

            keychar = String.fromCharCode(key);

            // control keys
            if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) )
                return true;

            // numbers
            else if ((("0123456789").indexOf(keychar) > -1))
                return true;

            // only one decimal point
            else if ((keychar == "."))
            {
                if (myfield.value.indexOf(keychar) > -1)
                    return false;
            }
            else
                return false;
        }

HTML

<input type="number" onkeypress="return numbersonly(this, event)"/>

Ответ 4

Браузеры ведут себя по-другому. В Chrome следующий код:

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number">
  <input type="submit">

будет работать для вас только, если он находится в форме и только после того, как пользователь нажмет кнопку отправки.

Ответ 5

Если вы не против использовать немного Javascript, это может помочь JS-BIN Demo:

<input type="number" onkeyup="if(!this.checkValidity()){this.value='';alert('Please enter a number')};"/>

Ответ 6

Вам нужно будет ввести поле ввода внутри формы и с кнопкой отправки. Проверка формы происходит при представлении формы. См. Демо здесь: http://jsfiddle.net/ds345/Q4muA/1/

<form>Number:
    <input type="number" name="Number" value="10">
    <br>
    <input type="submit" value="Submit" />
</form>

Ответ 7

Попробуйте следующее: -

 $("#txtAge").keydown(function (e) {
       if(e.key=='e' || e.key=='.' || e.key=='-')
        return false;
    });

Ответ 8

Я замечаю, что вопрос был опубликован около 2013 года. В любом случае, теперь type = "number" ограничивает алфавиты и специальные символы, другие, что 'e', '.' и '+' как 'e' и '.' рассматриваются как экспоненциальные числа, такие как 1.2e + 12, '.' рассматривается для десятичных чисел.