Ввод текста в формате HTML позволяет вводить только цифры

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

Ответы

Ответ 1

Note: This is an updated answer. Comments below refer to an old version which messed around with keycodes.

JavaScript

Приведенная ниже функция setInputFilter позволяет использовать любой тип фильтра ввода для текста <input>, включая различные числовые фильтры (см. ниже).

В отличие от большинства других решений, этот правильно поддерживает Копировать + Вставить, Перетащить + Отбросить, все сочетания клавиш, все операции с контекстным меню, все неиспользуемые клавиши (например, клавиши курсора и клавиши навигации), положение курсора, всю клавиатуру макеты всех языков и платформ и всех браузеров начиная с IE 9.

Попробуйте сами на JSFiddle.

// Restricts input for the given textbox to the given inputFilter.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.oldValue = "";
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  });
}

// Restrict input to digits and '.' by using a regular expression filter.
setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value);
});

Некоторые фильтры ввода, которые вы можете использовать:

  • Целые значения (только положительные):
    /^\d*$/.test(value)
  • Целочисленные значения (положительные и до определенного предела):
    /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
  • Целочисленные значения (как положительные, так и отрицательные):
    /^-?\d*$/.test(value)
  • значения с плавающей точкой (допускается использование . и , в качестве десятичного разделителя):
    /^-?\d*[.,]?\d*$/.test(value)
  • Значения валюты (т.е. не более двух знаков после запятой):
    /^-?\d*[.,]?\d{0,2}$/.test(value)
  • A-Z только (то есть основные латинские буквы):
    /^[a-z]*$/i.test(value)
  • Только латинские буквы (т.е. английский и большинство европейских языков, подробности о диапазонах символов Unicode см. в https://unicode-table.com):
    /^[a-z\u00c0-\u024f]*$/i.test(value)
  • Шестнадцатеричные значения:
    /^[0-9a-f]*$/i.test(value)

Обратите внимание, что вы все равно должны выполнить проверку на стороне сервера!

JQuery

Существует также версия JQuery этого. Посмотрите этот ответ или попробуйте сами на JSFiddle.

HTML 5

HTML 5 имеет собственное решение с <input type="number"> (см. спецификацию), но обратите внимание, что поддержка браузера различается:

  • Большинство браузеров проверяют ввод только при отправке формы, а не при вводе.
  • Большинство мобильных браузеров не поддерживают атрибуты step, min и max.
  • Chrome (версия 71.0.3578.98) по-прежнему позволяет пользователю вводить символы e и E в поле. Также см. этот вопрос.
  • Firefox (версия 64.0) и Edge (EdgeHTML версия 17.17134) по-прежнему позволяют пользователю вводить любой текст в поле.

Попробуйте сами на w3schools.com.

Ответ 2

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

<input type='text' onkeypress='validate(event)' />

И этот скрипт

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

Ответ 3

Я долго искал для этого хороший ответ, и нам отчаянно нужно <input type="number", но, кроме того, эти 2 являются самыми лаконичными способами, которые я мог бы придумать:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

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

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

Ответ 4

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

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

Ответ 5

И еще один пример, который отлично подходит для меня:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

Также присоединяется к событию нажатия клавиши

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

И HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

Вот пример jsFiddle

Ответ 6

HTML5 имеет <input type=number>, что звучит правильно для вас. В настоящее время поддерживается только Opera, но существует проект, который имеет реализацию JavaScript.

Ответ 7

Большинство ответов здесь имеют слабость использования key- событий.

Многие ответы ограничат вашу способность делать выбор текста с помощью клавиатурных макросов, копирования + вставки и более нежелательного поведения, другие, похоже, зависят от конкретных плагинов jQuery, которые убивают мух с помощью пулеметов.

Это простое решение, кажется, лучше всего работает для меня кроссплатформенно, независимо от механизма ввода (нажатие клавиш, копирование + вставка, щелчок правой кнопкой мыши копирование + вставка, речь в текст и т.д.) Все макросы клавиатуры для выделения текста по-прежнему будут работать, и это даже ограничит возможность установки нечисловых значений с помощью скрипта.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

Ответ 8

Я решил использовать комбинацию двух ответов, упомянутых здесь i.e.

<input type="number" />

и

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

<input type="text" onkeypress="return isNumberKey(event);">

Ответ 9

HTML5 поддерживает регулярные выражения, поэтому вы можете использовать это:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

Предупреждение. Некоторые браузеры пока этого не поддерживают.

Ответ 10

JavaScript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

Дополнительно вы можете добавить запятую, период и минус (,.-)

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

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

Ответ 11

Так просто....

//В функции JavaScript (можно использовать HTML или PHP).

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

В форме ввода:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

Ввод макс. (Эти значения позволяют использовать 12-значное число)

Ответ 12

2 решения:

Использовать средство проверки формы (например, с плагином проверки jQuery)

Выполните проверку во время события onblur (т.е. когда пользователь покидает поле) поля ввода с помощью регулярного выражения:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

Ответ 13

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

Таким образом, пользователь может свободно использовать клавиатурные стрелки, клавиши-модификаторы, backspace, delete, использовать нестандартные клавиатуры, использовать мышь для вставки, использовать текст перетаскивания и даже использовать входы доступности.

Ниже script допускаются положительные и отрицательные числа

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed


var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}
<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

Ответ 15

Ниже вы найдете решение. В этом случае пользователь может указать только значение numeric. Также пользователь не может использовать copy, paste, drag и drop во входе.

Разрешенные символы

0,1,2,3,4,5,6,7,8,9

Не допускается Символы и символы через события

  • Алфавитное значение
  • Специальные символы
  • Копировать
  • Вставить
  • Перетащите
  • Падение

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

Ответ 16

Если вы хотите предложить устройство (возможно, мобильный телефон) между альфа-или числовой, вы можете использовать <input type="number">.

Ответ 17

Коротка и слабая реализация с использованием jQuery и replace() вместо просмотра event.keyCode или event.which:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Только небольшой побочный эффект, который набирает буква на мгновение, и CTRL/CMD + A, кажется, немного странно.

Ответ 18

Код JavaScript:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

Код HTML:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

отлично работает, потому что код ключа backspace равен 8, и выражение регулярного выражения не позволяет ему, поэтому это простой способ обойти ошибку:)

Ответ 19

input type="number" - это атрибут HTML5.

В другом случае это поможет вам:

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

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

Ответ 20

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

<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');">

Ответ 21

Просто другой вариант с jQuery с помощью

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

Ответ 22

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

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

Ответ 23

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

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

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

Ответ 24

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

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

Ответ 25

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

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();
  }
}

Ответ 26

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

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

И этот script:

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();}
    }
}

... ИЛИ это script, без 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 будет неконтролируемым с "preventDefault" на google chrome, однако, с атрибутом "onkeydown", TAB становится управляемым!

Код ASCII для TAB = > 9

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

Второй script намного больше первого, но массиву не нужны все ключи. Первая цифра в каждой позиции массива - это количество раз, когда каждая позиция будет считана. Для каждого чтения будет увеличено 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 = > (home);
  • 35 = > (конец);

Ответ 27

Простой способ решить эту проблему - реализовать функцию 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"/>

Ответ 28

Это расширенная версия решения 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'));
            }
    }); 
});

Ответ 29

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

$(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();
    };
});

Ответ 30

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

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 обеспечивает аналогичные проверки браузером числа без стрелок

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

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

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

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