Как разрешить только числовые (0-9) в поле ввода HTML, используя jQuery?

Question

Я создаю веб-страницу, где у меня есть поле ввода текста, в котором я хочу разрешить только числовые символы, такие как (0,1,2,3,4,5 ... 9) 0-9.

Как я могу сделать это с помощью jQuery?

Answer 1

JQuery

^{Примечание: Это обновленный ответ. Комментарии ниже относятся к старой версии, которая путалась с кодами клавиш.}

Плагин inputFilter из приведенного ниже сценария позволяет вам использовать любой тип входного фильтра для текста <input>, включая различные числовые фильтры. Это будет правильно обрабатывать Copy + Paste, Drag + Drop, сочетания клавиш, операции контекстного меню, не типизируемые клавиши, положение курсора, все раскладки клавиатуры и все браузеры начиная с IE 9 Обратите внимание, что вы все еще должны выполнить проверку на стороне сервера!

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

// Restricts input for each element in the set of matched elements to the given inputFilter.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", 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);
      }
    });
  };
}(jQuery));

Использование:

// Restrict input to digits by using a regular expression filter.
$("#myTextBox").inputFilter(function(value) {
  return /^\d*$/.test(value);
});

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

• Целое число значения (положительные и отрицательные):
  /^-?\d*$/.test(value)
• Целое число значения (только положительные):
  /^\d*$/.test(value)
• Целое число значения (положительные и до определенного предела):
  /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
• Значения с плавающей точкой (допускается использование . и , в качестве десятичного разделителя):
  /^-?\d*[.,]?\d*$/.test(value)
• Валюта значения (т. Е. Не более двух десятичных знаков):
  /^-?\d*[.,]?\d{0,2}$/.test(value)
• Шестнадцатеричные значения:
  /^[0-9a-f]*$/i.test(value)

Чистый JavaScript

jQuery на самом деле не нужен для этого, вы можете сделать то же самое с чистым JavaScript. См. этот ответ или попробуйте сами на 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 .

Более сложные параметры проверки

Если вы хотите выполнить некоторые другие проверки и проверки, это может быть полезно:

• https://github.com/cstaylor/numeric.js/tree/master
• http://jstepper.emkay.dk
• http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values

Answer 2

Вот функция, которую я использую:

// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
            // home, end, period, and numpad decimal
            return (
                key == 8 || 
                key == 9 ||
                key == 13 ||
                key == 46 ||
                key == 110 ||
                key == 190 ||
                (key >= 35 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

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

$("#yourTextBoxName").ForceNumericOnly();

Answer 3

Встроенный:

<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

Ненавязчивый стиль (с jQuery):

$('input[name="number"]').keyup(function(e)
                                {
  if (/\D/g.test(this.value))
  {
    // Filter non-digits from input value.
    this.value = this.value.replace(/\D/g, '');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">

Answer 4

Вы можете просто использовать простое регулярное выражение JavaScript для проверки чисто числовых символов:

/^[0-9]+$/.test(input);

Возвращает true, если ввод числовой, или false, если нет.

или для кода события, просто используйте ниже:

     // Allow: backspace, delete, tab, escape, enter, ctrl+A and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }

    var charValue = String.fromCharCode(e.keyCode)
        , valid = /^[0-9]+$/.test(charValue);

    if (!valid) {
        e.preventDefault();
    }

Answer 5

Вы можете использовать для ввода события, как это:

$(document).on("input", ".numeric", function() {
    this.value = this.value.replace(/\D/g,'');
});

Но что это за кодовая привилегия?

• Работает в мобильных браузерах (проблемы с keydown и keyCode).
• Он работает и с контентом, сгенерированным AJAX, потому что мы используем «on».
• Лучшая производительность, чем при нажатии клавиш, например, при вставке события.

Answer 6

Коротко и сладко - даже если это никогда не привлечет к себе большого внимания после 30+ ответов;)

  $('#number_only').bind('keyup paste', function(){
        this.value = this.value.replace(/[^0-9]/g, '');
  });

Answer 7

Использовать функцию JavaScript isNaN ,

if (isNaN($('#inputid').val()))

if (isNaN (document.getElementById ('inputid'). Val ()))

if (isNaN(document.getElementById('inputid').value))

Обновление: И вот хорошая статья, рассказывающая об этом, но использующая jQuery: Ограничение ввода в текстовых полях HTML числовыми значениями

Answer 8

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
});

Источник: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values

Answer 9

Я использую это в нашем внутреннем общем js-файле. Я просто добавляю класс к любому входу, который нуждается в таком поведении.

$(".numericOnly").keypress(function (e) {
    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});

Answer 10

Проще для меня это

jQuery('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});