Блог

Главная - Вопросы по программированию - Как я могу ограничить поле ввода html, чтобы оно принимало только числовой ввод?

Как я могу ограничить поле ввода html, чтобы оно принимало только числовой ввод?

#html

#HTML

Вопрос:

У меня есть поле ввода html, но данными являются только числовые данные. Как я могу обеспечить это?

Ответ №1:

Вы можете использовать HTML5 для проверки типа вашего ввода без использования JavaScript. Однако этот метод (пока) поддерживается не всеми браузерами. 

 <input type="number" name="quantity" min="1" max="5">

Используйте следующие атрибуты для указания ограничений (как описано здесь):

  • max — указывает максимально допустимое значение
  • min — указывает минимально допустимое значение
  • шаг — задает допустимые интервалы между номерами
  • значение — Указывает значение по умолчанию

Комментарии:

1. по-прежнему не поддерживается IE, работает как шарм в chrome. Для IE jquery os должен использоваться JS.

2. Согласно w3schools.com/tags/tag_input.asp все атрибуты (max, min и step) поддерживаются начиная с IE 10… Хотя я его не тестировал…

Ответ №2:

Вам понадобится событие для проверки, является ли введенный текст числом или нет. Смотрите пример кода

JS

 function isValidChar(char){

    var txt = char;
    var found = false;
    var validChars = "0123456789"; //List of valid characters

    for(j=0;j<txt.length;j  ){ //Will look through the value of text
        var c = txt.charAt(j);
        found = false;
        for(x=0;x<validChars.length;x  ){
            if(c==validChars.charAt(x)){
                found=true;
                break;
            }
        }
        if(!found){
            //If invalid character is found remove it and return the valid character(s).
            document.getElementById('txtFld').value = char.substring(0, char.length -1);
            break;
        }
    }
}

HTML

 <input type="text" id="txtFld" onKeyup="isValidChar(this.value);" />

Смотрите рабочий код здесь jsfiddle

Хотя код немного длинный, его можно свести к минимуму, если вы знаете, как использовать регулярное выражение или jquery.

Комментарии:

1. @khachick Хорошая мысль, ну, вы можете просто добавить «.» и «-» к допустимым символам. В любом случае, этот код на самом деле не предназначен для числового ввода и он не идеален. Я просто получаю это в своем коде, если проверка числовых значений является строгой. Потребуется другая проверка, например isNaN ()

2. существует проблема, когда какая-либо клавиша нажата в течение длительного времени, это приведет к обрезке только последнего символа текста.

3. @Javed Akram, ваше правильное Я не проверял это событие. В любом случае добавление дополнительных событий onKeyPress="isValidChar(this.value);" решит эту проблему. Спасибо за информацию, я проверю свой существующий код, чтобы исправить возможный эффект в моем приложении.

Ответ №3:

Попробуйте это, и вам решать, выбирать минимальное число и максимальное:

 legend {
    background-color: #000;
    color: #fff;
    padding: 3px 6px;
}

.output {
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
    width: 43%;
}

input {
    margin: 1rem 0;
}

label {
    display: inline-block;
    font-size: .8rem;
}

input:invalid   span:after {
    content: '✖';
    color: #f00;
    padding-left: 5px;
}

input:valid   span:after {
    content: '✓';
    color: #26b72b;
    padding-left: 5px;
}  
  <span class="validity"></span>

<input type="number" id="userId" name="userId"
           placeholder="Min: 1, max: 10000"
           min="1" max="10000" />
    <span class="validity"></span>

Ответ №4:

Number () — это функция, которую вы хотите, чтобы «123a» возвращала NAN

parseInt () усекает конечные буквы «123a», возвращает 123

 <input type="text" id="txtFld" onblur="if(!Number(this.value)){alert('not a number');}" />

Комментарии:

1. Вам не нужно добавлять javascript: псевдопротокол, это вообще не нужно, начиная с Netscape…

2. 0 — это число, но появляется предупреждение.

Ответ №5:

Попробуйте этот код. работает даже при использовании ctrl v (вставить)…

 <SCRIPT Language ="VBScript"> 

sub onlyNumber(idBox)

    Set objInl = CreateObject("VBScript.RegExp")

    objInl.Global = True

    objInl.Pattern = "[^0-9-.]"

    document.getElementById(idBox).value = objInl.Replace(document.getElementById(idBox).value, "")

    set objInl = nothing

end sub

</SCRIPT>
  
  <input type="text" id="txtFld" onKeyup="onlyNumber(this.id);" />

Ответ №6:

 <input name="txtnumbersOnly"  type="text" onkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;">

Ответ №7:

Используйте функцию Java script в качестве средства проверки. Или вы также можете получить функции jquery.