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

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

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

JQuery

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

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

// Restricts input for the set of matched elements to the given inputFilter function.
(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);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

Теперь вы можете использовать inputFilterплагин для установки входного фильтра:

$(document).ready(function() {
  $("#myTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);    // Allow digits only, using a RegExp
  });
});

Посмотрите демонстрацию JSFiddle для большего количества примеров входного фильтра. Также обратите внимание, что вы все равно должны выполнить проверку на стороне сервера!

Чистый JavaScript (без jQuery)

JQuery на самом деле не нужен для этого, вы можете сделать то же самое с чистым JavaScript. Смотрите этот ответ .

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 .

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

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

В линию:

<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">

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

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

Это возвращает истину, если ввод числовой или ложь, если нет.

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

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

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

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

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

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

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

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

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

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

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

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

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

$(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

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

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

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

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

Почему так сложно? Вам даже не нужен jQuery, потому что есть атрибут шаблона HTML5:

<input type="text" pattern="[0-9]*">

Круто то, что он выводит цифровую клавиатуру на мобильные устройства, что намного лучше, чем использование jQuery.

Вы можете сделать то же самое, используя это очень простое решение

$("input.numbers").keypress(function(event) {
  return /\d/.test(String.fromCharCode(event.keyCode));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />

Я ссылался на эту ссылку для решения. Работает отлично !!!

Вы можете попробовать ввести номер HTML5 :

<input type="number" value="0" min="0"> 

Для несовместимых браузеров существуют запасные варианты Modernizr и Webforms2 .

Атрибут pattern в HTML5 определяет регулярное выражение, по которому проверяется значение элемента.

  <input  type="text" pattern="[0-9]{1,3}" value="" />

Примечание. Атрибут pattern работает со следующими типами ввода: текст, поиск, URL, телефон, электронная почта и пароль.

• [0-9] можно заменить любым условием регулярного выражения.

• {1,3} представляет минимум 1 и максимум 3 цифры.

Что-то довольно простое, используя jQuery.validate

$(document).ready(function() {
    $("#formID").validate({
        rules: {
            field_name: {
                numericOnly:true
            }
        }
    });
});

$.validator.addMethod('numericOnly', function (value) {
       return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');

function suppressNonNumericInput (event) {

    if( !(event.keyCode == 8                                // backspace
        || event.keyCode == 46                              // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
}

Я пришел к очень хорошему и простому решению, которое не мешает пользователю выбирать текст или вставлять копии, как это делают другие решения. JQuery стиль :)

$("input.inputPhone").keyup(function() {
    var jThis=$(this);
    var notNumber=new RegExp("[^0-9]","g");
    var val=jThis.val();

    //Math before replacing to prevent losing keyboard selection 
    if(val.match(notNumber))
    { jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server

Вы можете использовать эту функцию JavaScript:

function maskInput(e) {
    //check if we have "e" or "window.event" and use them as "event"
        //Firefox doesn't have window.event 
    var event = e || window.event 

    var key_code = event.keyCode;
    var oElement = e ? e.target : window.event.srcElement;
    if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
        if ((key_code > 47 && key_code < 58) ||
            (key_code > 95 && key_code < 106)) {

            if (key_code > 95)
                 key_code -= (95-47);
            oElement.value = oElement.value;
        } else if(key_code == 8) {
            oElement.value = oElement.value;
        } else if(key_code != 9) {
            event.returnValue = false;
        }
    }
}

И вы можете привязать его к вашему текстовому полю следующим образом:

$(document).ready(function() {
    $('#myTextbox').keydown(maskInput);
});

Я использую выше в производстве, и он отлично работает, и это кросс-браузер. Кроме того, он не зависит от jQuery, поэтому вы можете привязать его к текстовому полю с помощью встроенного JavaScript:

<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>

Я думаю, что это поможет всем

  $('input.valid-number').bind('keypress', function(e) { 
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
  })

Я написал свой, основываясь на посте @ user261922, немного измененном, чтобы вы могли выбрать все, вкладку и обрабатывать несколько полей «только для чисел» на одной странице.

var prevKey = -1, prevControl = '';
$(document).ready(function () {
    $(".OnlyNumbers").keydown(function (event) {
        if (!(event.keyCode == 8                                // backspace
            || event.keyCode == 9                               // tab
            || event.keyCode == 17                              // ctrl
            || event.keyCode == 46                              // delete
            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
            || (event.keyCode >= 96 && event.keyCode <= 105)    // number on keypad
            || (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id))          // ctrl + a, on same control
        ) {
            event.preventDefault();     // Prevent character input
        }
        else {
            prevKey = event.keyCode;
            prevControl = event.currentTarget.id;
        }
    });
});

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

http://ajax911.com/numbers-numeric-field-jquery/

$("#textfield").bind("keyup paste", function(){
    setTimeout(jQuery.proxy(function() {
        this.val(this.val().replace(/[^0-9]/g, ''));
    }, $(this)), 0);
});

Вы хотели бы разрешить вкладку:

$("#txtboxToFilter").keydown(function(event) {
    // Allow only backspace and delete
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
        // 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.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});

Вот ответ, который использует фабрику jQuery UI Widget. Вы можете настроить, какие символы разрешены легко.

$('input').numberOnly({
    valid: "0123456789+-.$,"
});

Это позволило бы цифры, знаки числа и суммы в долларах.

$.widget('themex.numberOnly', {
    options: {
        valid : "0123456789",
        allow : [46,8,9,27,13,35,39],
        ctrl : [65],
        alt : [],
        extra : []
    },
    _create: function() {
        var self = this;

        self.element.keypress(function(event){
            if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
            {
                return;
            }
            if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
            {
                return;
            }
            if(event.altKey && self._codeInArray(event,self.options.alt))
            {
                return;
            }
            if(!event.shiftKey && !event.altKey && !event.ctrlKey)
            {
                if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
                {
                    return;
                }
            }
            event.preventDefault(); 
        });
    },

    _codeInArray : function(event,codes) {
        for(code in codes)
        {
            if(event.keyCode == codes[code])
            {
                return true;
            }
        }
        return false;
    }
});

Это кажется неразрушимым.

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9\.]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});

Необходимо убедиться, что у вас есть цифровая клавиатура и клавиша табуляции тоже работает

 // Allow only backspace and delete
            if (event.keyCode == 46 || event.keyCode == 8  || event.keyCode == 9) {
                // 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.keyCode >= 96 && event.keyCode <= 105)) {

                }
                else {
                    event.preventDefault();
                }
            }

Я хотел немного помочь, и я сделал свою версию, onlyNumbersфункцию ...

function onlyNumbers(e){
    var keynum;
    var keychar;

    if(window.event){  //IE
        keynum = e.keyCode;
    }
    if(e.which){ //Netscape/Firefox/Opera
        keynum = e.which;
    }
    if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
       (event.keyCode >= 96 && event.keyCode <= 105)))return true;

    if(keynum == 110 || keynum == 190){
        var checkdot=document.getElementById('price').value;
        var i=0;
        for(i=0;i<checkdot.length;i++){
            if(checkdot[i]=='.')return false;
        }
        if(checkdot.length==0)document.getElementById('price').value='0';
        return true;
    }
    keychar = String.fromCharCode(keynum);

    return !isNaN(keychar);
}

Просто добавьте в тег ввода "... input ... id =" price "onkeydown =" return onlyNumbers (event) "..." и все готово;)

Я тоже хотел бы ответить :)

    $('.justNum').keydown(function(event){
        var kc, num, rt = false;
        kc = event.keyCode;
        if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
        return rt;
    })
    .bind('blur', function(){
        num = parseInt($(this).val());
        num = isNaN(num) ? '' : num;
        if(num && num < 0) num = num*-1;
        $(this).val(num);
    });

Вот и все ... только цифры. :) Почти это может работать только с «размытием», но ...

Простой способ проверить, является ли введенное значение числовым:

var checknumber = $('#textbox_id').val();

    if(jQuery.isNumeric(checknumber) == false){
        alert('Please enter numeric value');
        $('#special_price').focus();
        return;
    }

Просто нужно применить этот метод в Jquery, и вы можете проверить свое текстовое поле, чтобы просто принять только номер.

function IsNumberKeyWithoutDecimal(element) {    
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp); 
}

Попробуйте это решение здесь

Вы можете попробовать ввести номер HTML5:

<input type="number" placeholder="enter the number" min="0" max="9">

Этот элемент тега ввода теперь будет принимать значение только от 0 до 9, поскольку атрибут min установлен в 0, а атрибут max установлен в 9.

Для получения дополнительной информации посетите http://www.w3schools.com/html/html_form_input_types.asp