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

Question

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

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

Answer 1

Многие люди здесь используют код ключа свойство , которое нелегко запомнить . Если у вас нет проблем с локалью, вы можете просто использовать ключ , который на самом деле является вводом, который пользователь вводит .

Смотрите это Скрипка

$("#txt").on("keypress",function(e){
  console.log("Entered Key is " + e.key);
  switch (e.key)
     {
         case "1":
         case "2":
         case "3":
         case "4":
         case "5":
         case "6":
         case "7":
         case "8":
         case "9":
         case "0":
         case "Backspace":
             return true;
             break;

         case ".":
             if ($(this).val().indexOf(".") == -1) //Checking if it already contains decimal. You can Remove this condition if you do not want to include decimals in your input box.
             {
                 return true;
             }
             else
             {
                 return false;
             }
             break;

         default:
             return false;
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Enter Value
<input id="txt" type="text" />

, введите следующий простой код.

Обратите внимание, что этот пример также содержит проверку десятичной записи.

В соответствии с этим вопросом это не требуется, поэтому вы можете просто снять кейс "." удалить десятичную запись.

Answer 2

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

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

$("input[type=text][pattern]").on("input", function () {
    if (!this.checkValidity())
        this.value = this.value.slice(0, -1);
});

---

Возможно, но не так просто для входов [тип = число] ...

Проблема с [type = "number"] заключается в том, что мы не можем удалить только недопустимый символ в конце. Агенты пользователя возвращают пустую строку всякий раз, когда ввод неверен.

Из спецификации W3C HTML5:

Если значение элемента не является допустимым числом с плавающей запятой, то вместо этого установите пустую строку.

https://dev.w3.org/html5/spec-LC/number-state.html#number-state

Это означает, что нам нужен способ сохранить предыдущее входное значение вручную.

Таким образом, для числового ввода решение будет выглядеть так:

$("input[type=number], input[type=text][pattern]").on("input", function () {
    if (!this.checkValidity())
        this.value = $(this).data("current-valid") || "";
    else
        $(this).data("current-valid", this.value);
});

---

К сожалению, это не будет работать в IE и EDGE. Нам нужно прибегнуть к шаблонному решению выше для этих браузеров. Тем не менее, вы можете использовать числовые вводы с этим простым многозаполнением.

$("input[type=number]").attr("type", "text").attr("pattern", "[0-9.]+");

Answer 3

Этот код jQuery отфильтровывает символы, набранные, пока удерживается нажатой Shift , Ctrl или Alt .

$('#AmountText').keydown(function (e) {
    if (e.shiftKey || e.ctrlKey || e.altKey) { // if shift, ctrl or alt keys held down
        e.preventDefault();         // Prevent character input
    } else {
        var n = e.keyCode;
        if (!((n == 8)              // backspace
        || (n == 46)                // delete
        || (n >= 35 && n <= 40)     // arrow keys/home/end
        || (n >= 48 && n <= 57)     // numbers on keyboard
        || (n >= 96 && n <= 105))   // number on keypad
        ) {
            e.preventDefault();     // Prevent character input
        }
    }
});

Answer 4

/**
Makes the textbox to accept only numeric input
*/

(function($) {
    $.fn.allowOnlyNumeric = function() {

        /**
        The interval code is commented as every 250 ms onchange of the textbox gets fired.
        */

        //  var createDelegate = function(context, method) {
        //      return function() { method.apply(context, arguments); };
        //  };

        /**
        Checks whether the key is only numeric.
        */
        var isValid = function(key) {
            var validChars = "0123456789";
            var validChar = validChars.indexOf(key) != -1;
            return validChar;
        };

        /**
        Fires the key down event to prevent the control and alt keys
        */
        var keydown = function(evt) {
            if (evt.ctrlKey || evt.altKey) {
                evt.preventDefault();
            }
        };

        /**
        Fires the key press of the text box   
        */
        var keypress = function(evt) {
            var scanCode;
            //scanCode = evt.which;
            if (evt.charCode) { //For ff
                scanCode = evt.charCode;
            }
            else { //For ie
                scanCode = evt.keyCode;
            }

            if (scanCode && scanCode >= 0x20 /* space */) {
                var c = String.fromCharCode(scanCode);
                if (!isValid(c)) {
                    evt.preventDefault();
                }
            }
        };

        /**
        Fires the lost focus event of the textbox   
        */
        var onchange = function() {
            var result = [];
            var enteredText = $(this).val();
            for (var i = 0; i < enteredText.length; i++) {
                var ch = enteredText.substring(i, i + 1);
                if (isValid(ch)) {
                    result.push(ch);
                }
            }
            var resultString = result.join('');
            if (enteredText != resultString) {
                $(this).val(resultString);
            }

        };

        //var _filterInterval = 250;
        //var _intervalID = null;

        //var _intervalHandler = null;

        /**
        Dispose of the textbox to unbind the events.
        */
        this.dispose = function() {
            $(this).die('change', onchange);
            $(this).die('keypress', keypress);
            $(this).die('keydown', keydown);
            //window.clearInterval(_intervalHandler);
        };

        $(this).live('change', onchange);
        $(this).live('keypress', keypress);
        $(this).live('keydown', keydown);
        //_intervalHandler = createDelegate(this, onchange);
        //_intervalID = window.setInterval(_intervalHandler, _filterInterval);
    }
})(jQuery);

Указанный выше плагин $ написан из текстового поля фильтра AjaxControlToolkit extender.js.

Однако одно поведение не заимствовано из AjaxControlToolkit, это то, что когда пользователь копирует и вставляет любое нечисловое значение, тогда запускается событие onchange, и текстовое поле уничтожает значения. Я просмотрел код и обнаружил, что этот onchange вызывается через каждые 250 мс, что является ударом по производительности, поэтому прокомментировал эту часть.

Answer 5

добавить приведенный ниже код в document.ready

    $('.class of text box').keyup(function () 
    {
    this.value = this.value.replace(/[^0-9]/g, '');
    });  

Answer 6

Есть так много хороших ответов, чтобы сделать это с помощью java Script или jQuery.

Я добавлю очень простой способ архивирования, используя только HTML5.

<input type="number" name="quantity" min="0" max="9">

Answer 7

Я использую в этой форме. Мне кажется правильным разрешить такие клавиши, как home , end , shift и ctrl , с недостатком пользователя для печати специальных символов :

$("#busca_cep").keydown(function(event) {
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 13 || event.keyCode == 16 || event.keyCode == 36 || event.keyCode == 35) {
        if (event.keyCode == 13) {
            localiza_cep(this.value);
        }
    } else {
        if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});

Answer 8

function Numbers(e)
{
    if($.browser.msie)
    {
        if(e.keyCode > 47 && e.keyCode < 58)
            return true;
        else
            return false;
    }
    else
    {
        if((e.charCode > 47 && e.charCode < 58) || (e.charCode == 0))
            return true;
        else
            return false;
    }
}

Надеюсь, это будет работать во всех браузерах.

Answer 9

Этот ответ был идеальным, но мы можем даже сделать его лучше и мощнее, комбинируя его с плагином jQuery.Validation .

Используя метод number () , мы можем разработать что-то вроде этого:

$('.numberOnly').keydown(function (event) { 
  if ((!event.shiftKey && !event.ctrlKey && !event.altKey) && 
    ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) 
  // 0-9 or numpad 0-9, disallow shift, ctrl, and alt 
  { 
    // check textbox value now and tab over if necessary 
  } 
  else if (event.keyCode != 8 && event.keyCode != 13 && event.keyCode != 46 && event.keyCode != 37 
    && event.keyCode != 39 && event.keyCode != 9 && event.keyCode != 109 
    && event.keyCode != 189 && event.keyCode != 110 && event.keyCode != 190) 
  // not backsapce (8), enter (13), del (46), left arrow (37), right arrow (39), tab (9), negetive sign (- : 109, 189), or point (. : 110, 190) 
  { 
    event.preventDefault(); 
  } 
  // else the key should be handled normally 
}); 
// _____________________________________________
jQuery.validator.setDefaults({ 
  debug: true, 
  success: "valid" 
}); 
// _____________________________________________
$(document).ready(function(){ 
  $('#myFormId').validate({ 
    rules: { 
      field: { 
        required: true, 
        number: true 
      } 
    } 
  }); 
}); 

Таким образом, любое текстовое поле в форме "#myFormId" с классом "numberOnly" может принимать только числа, включая десятичное, число с плавающей запятой и даже отрицательное число. Вуаля:)

PS: В моем случае по какой-то причине я использовал jQuery.validator.addMethod () вместо .validate ():

jQuery.validator.addMethod("numberOnly", function (value, element) { 
var result = !isNaN(value); 
return this.optional(element) || result; 
}, jQuery.format("Please enter a valid number.")); 

(он отлично работает внутри моего проекта ASP.NET MVC 3 + ненавязчивая проверка JavaScript, хооооооооооо!)

Answer 10

Это то, что я использую для проверки числовых значений для целых или плавающих значений (ненавязчивый стиль с jQuery):

$('input[name="number"]').keyup(function(e) {
    var float = parseFloat($(this).attr('data-float'));

    /* 2 regexp for validating integer and float inputs *****
        > integer_regexp : allow numbers, but do not allow leading zeros
        > float_regexp : allow numbers + only one dot sign (and only in the middle of the string), but do not allow leading zeros in the integer part
    *************************************************************************/
    var integer_regexp = (/[^0-9]|^0+(?!$)/g);
    var float_regexp = (/[^0-9\.]|^\.+(?!$)|^0+(?=[0-9]+)|\.(?=\.|.+\.)/g);

    var regexp = (float % 1 === 0) ? integer_regexp : float_regexp;
    if (regexp.test(this.value)) {
        this.value = this.value.replace(regexp, '');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-float="1" id="number" name="number" placeholder="integer">
<input type="text" data-float="0.1" id="number" name="number" placeholder="float">