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

Question

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

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

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

981

html jquery validation numeric

Источник

user45261 15 июн '09 в 09:22

73 ответа

Решение

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

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

200

Источник

user8707 08 мар '10 в 16:57

В соответствии:

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

180

Источник

user161182 05 июн '11 в 03:43

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

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

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

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

108

Источник

user616472 14 авг '15 в 07:27

Вы можете просто использовать простое регулярное выражение 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();
    }

107

Источник

user205568 17 фев '10 в 17:55

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

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

72

Источник

user1237572 24 фев '16 в 02:58

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

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

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

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

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

45

Источник

user20126 08 мар '10 в 17:00

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

34

Источник

user108208 15 июн '09 в 09:26

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

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

31

Источник

user517517 14 фев '11 в 19:47

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

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

26

Источник

user1252158 02 апр '12 в 11:20

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

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

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

26

Источник

user3167642 29 окт '14 в 19:27

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

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

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

22

Источник

user2446679 30 июл '14 в 11:35

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

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

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

[0-9] можно заменить любым условием регулярного выражения.
{1,3} представляет минимум 1 и максимум 3 цифры.

14

Источник

user2633945 19 янв '15 в 12:11

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

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

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

14

Источник

user288671 22 дек '11 в 22:36

Вот два разных подхода:

Разрешить числовые значения с десятичной точкой
Разрешить числовые значения без десятичной точки

ПОДХОД 1:

$("#approach1").on("keypress keyup blur",function (e) {
   $(this).val($(this).val().replace(/[^0-9\.]/g,''));
      if ((e.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
          event.preventDefault();
      }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Numeric with decimal point</h2><br/>
<span>Enter Amount</span>
<input type="text" name="amount" id="approach1">

ПОДХОД 2:

$("#approach2").on("keypress keyup blur",function (event) {    
   $(this).val($(this).val().replace(/[^\d].+/, ""));
    if ((event.which < 48 || event.which > 57)) {
        event.preventDefault();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Numeric without decimal point</h2><br/>
<span>Enter Amount</span>
<input type="text" name="amount" id="approach2">

11

Источник

user2601258 02 май '20 в 12:55

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

11

Источник

user261922 12 июл '10 в 20:38

Что-то довольно простое, используя 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)');

11

Источник

user364070 24 фев '11 в 23:35

Попробуйте в html-коде, как onkeypress и onpast

<input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" onpast="return false">

10

Источник

user1903017 04 авг '17 в 11:20

Если есть гладкий OneLiner:

      <input type="text" onkeypress="return /[0-9]/i.test(event.key)" >

10

Источник

user12531388 04 янв '22 в 12:14

Я пришел к очень хорошему и простому решению, которое не мешает пользователю выбирать текст или вставлять копии, как это делают другие решения. 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

8

Источник

user2352618 19 сен '13 в 21:07

Вы можете использовать эту функцию 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()"/>

8

Источник

user70393 15 июн '09 в 09:27

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

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

7

Источник

user1370705 24 май '12 в 19:51

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

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

7

Источник

user1051539 05 апр '12 в 07:18

Вот ответ, который использует фабрику 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;
    }
});

6

Источник

user1031569 25 мар '13 в 16:58

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

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

6

Источник

user972884 05 окт '11 в 08:04

Вот почему я недавно написал для достижения этой цели. Я знаю, что на это уже ответили, но я оставляю это для дальнейшего использования.

Этот метод допускает только 0–9 как клавиатуру, так и цифровую клавиатуру, клавиши возврата, табуляции, стрелки влево и вправо (обычные операции с формой)

$(".numbersonly-format").keydown(function (event) {
    // Prevent shift key since its not needed
    if (event.shiftKey == true) {
        event.preventDefault();
    }
    // Allow Only: keyboard 0-9, numpad 0-9, backspace, tab, left arrow, right arrow, delete
    if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46) {
        // Allow normal operation
    } else {
        // Prevent the rest
        event.preventDefault();
    }
});

6

Источник

user493800 08 мар '11 в 17:20

Это кажется неразрывным.

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

6

Источник

user2407212 26 июн '13 в 12:52

Я написал свою статью на основе поста @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;
        }
    });
});

6

Источник

user716018 09 авг '11 в 20:35

Вы можете попробовать ввести номер 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

5

Источник

user3919542 14 апр '15 в 17:05

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

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

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

5

Источник

user2210865 22 окт '13 в 06:59

Другие вопросы по тегам html jquery validation numeric

user24054 15 июн '09 в 09:26 2009-06-15 09:26 · Accepted Answer · 2009-06-15 09:26

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.

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

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