Ввод текста HTML допускает только числовой ввод

Question

Есть ли быстрый способ настроить ввод текста HTML (<input type=text />), чтобы разрешить только цифровые нажатия клавиш (плюс '.')?

Answer 1

Еще один пример, когда вы можете добавлять только цифры в поле ввода, не можете буквы

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

Answer 2

просто используйте type = "number" теперь этот атрибут поддерживается в большинстве браузеров

<input type="number" maxlength="3" ng-bind="first">

Answer 3

Вы также можете сравнить входное значение (которое по умолчанию обрабатывается как строку) с самим собой, принудительно числовым, например:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

Однако, вам нужно привязать это к событию, как keyup и т. Д.

Answer 4

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

Answer 5

Используйте этот DOM:

<input type = "text" onkeydown = "validate(event)"/>

И этот скрипт:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

... ИЛИ этот скрипт без indexOf, использующий два for 's ...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

Я использовал атрибут onkeydown вместо onkeypress, потому что атрибут onkeydown проверяется перед атрибутом onkeypress. Проблема будет в браузере Google Chrome.

С атрибутом «onkeypress» TAB будет неуправляемым с «protectDefault» в Google Chrome, однако с атрибутом «onkeydown» TAB станет управляемым!

Код ASCII для TAB => 9

Первый скрипт имеет меньше кода, чем второй, однако в массиве символов ASCII должны быть все ключи.

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




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




В случае числовых ключей только 10 (0 - 9), но если бы они были 1 миллионом, не имело бы смысла создавать массив со всеми этими ключами.

ASCII коды:

• 8 ==> (Backspace);
• 46 => (Удалить);
• 37 => (стрелка влево);
• 39 => (стрелка вправо);
• 48 - 57 => (цифры);
• 36 => (дома);
• 35 => (конец);

Answer 6

Это улучшенная функция:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

Answer 7

Мое решение для лучшего взаимодействия с пользователем:

HTML

<input type="tel">

JQuery

$('[type=tel]').on('change', function(e) {
  $(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
  keys = ['0','1','2','3','4','5','6','7','8','9','.']
  return keys.indexOf(event.key) > -1
})

подробности:

Прежде всего, типы ввода :

number показывает стрелки вверх / вниз, уменьшающие фактическое пространство ввода, я считаю их уродливыми и полезными, только если число представляет количество (такие вещи, как телефоны, коды городов, идентификаторы ... не нуждаются в них) tel обеспечивает аналогичные проверки числа без стрелок в браузере

Использование [номер / телефон] также помогает отображать цифровую клавиатуру на мобильных устройствах.

Для проверки JS мне понадобились 2 функции: одна для обычного пользовательского ввода (нажатие клавиши), а другая для исправления (изменения) копирования и вставки, другие комбинации дали бы мне ужасный пользовательский опыт.

Я использую более надежный KeyboardEvent.key вместо , который теперь устарел KeyboardEvent.charCode

И в зависимости от поддержки вашего браузера вы можете рассмотреть возможность использования Array.prototype.includes () вместо плохо названного Array.prototype.indexOf () (для результатов true / false )

Answer 8

Это расширенная версия решения geowa4 . Поддерживает атрибуты min и max. Если число выходит за пределы диапазона, будет показано предыдущее значение.

Вы можете проверить это здесь.

Использование: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

Если входы динамические, используйте это:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});

Answer 9

Лучший способ (разрешить ВСЕ типы чисел - реальный минус, реальный положительный, iinteger отрицательный, целочисленный положительный):

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

Answer 10

Простой способ решить эту проблему - реализовать функцию jQuery для проверки с помощью регулярных выражений символов, напечатанных в текстовом поле, например:

Ваш HTML-код:

<input class="integerInput" type="text">

И функция js, использующая jQuery

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });

<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>