it-roy-ru.com

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

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

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

837
Prashant

jQuery

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

Плагин inputFilter из приведенного ниже сценария позволяет использовать входной фильтр any для текстового <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);
});

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

  • Значения Integer (как положительные, так и отрицательные):
    /^-?\d*$/.test(value)
  • Integer значения (только положительные):
    /^\d*$/.test(value)
  • Значения Integer (положительные и до определенного предела):
    /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
  • Значения с плавающей точкой (допускается использование . и , в качестве десятичного разделителя):
    /^-?\d*[.,]?\d*$/.test(value)
  • Значения Currency (т.е. не более двух десятичных знаков):
    /^-?\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 .

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

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

1178
kgiannakakis

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

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

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

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

133
Patrick Fisher

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

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

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

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

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

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

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

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

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

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

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

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

43
Amr Elgarhy
$(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 ​​

27
Ivar

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

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

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

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

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

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

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

20
guest

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

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

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

16
Ganesh Babu

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

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

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

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

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

14
vickisys

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

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

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

13
Vitalii Fedorenko

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

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

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

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

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

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

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

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

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

// 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
Jonathan

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

Я написал свой, основываясь на посте @ 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
jamesbar2

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

Я хотел немного помочь, и я сделал свою версию, функцию 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) "..." и все готово;)

5
crash

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

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

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

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

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

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

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

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

5
Pedro Soares

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

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

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

5
Jitender Kumar

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

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

Существует невероятная проблема совместимости с использованием нажатий клавиш для обнаружения нажатого символа ... см. quirksmode , чтобы узнать больше об этом.

Я бы предложил использовать keyup для создания вашего фильтра, потому что тогда у вас есть метод $ (element) .val (), который вы можете использовать для оценки реальных универсальных символов.

Затем вы можете отфильтровать любые NON-цифры с помощью регулярных выражений, таких как:

заменить (/ [^ 0-9]/г, '');

Это решает все проблемы, такие как проблемы сдвига и вставки, потому что всегда есть keyup, и поэтому значение всегда будет оцениваться (если javascript не выключен).

Итак ... чтобы превратить это в JQuery ... Вот небольшой незавершенный плагин, который я пишу, он называется inputmask и будет поддерживать больше масок, когда закончите. На данный момент работает маска цифр.

Вот и все ...

/**
 * @author Tom Van Schoor
 * @company Tutuka Software
 */
(function($) {
  /**
   * @param {Object}
   * $$options options to override settings
   */
  jQuery.fn.inputmask = function($$options) {
    var $settings = $.extend( {}, $.fn.inputmask.defaults, $$options);

    return this.each(function() {
      // $this is an instance of the element you call the plug-in on
      var $this = $(this);

      /*
       * This plug-in does not depend on the metadata plug-in, but if this
       * plug-in detects the existence of the metadata plug-in it will
       * override options with the metadata provided by that plug-in. Look at
       * the metadata plug-in for more information.
       */
      // o will contain your defaults, overruled by $$options,
      // overruled by the meta-data
      var o = $.metadata ? $.extend( {}, $settings, $this.metadata()) : $settings;

      /*
       * if digits is in the array 'validators' provided by the options,
       * stack this event handler
       */
      if($.inArray('digits', o.validators) != -1) {
        $this.keyup(function(e) {
          $this.val(stripAlphaChars($this.val()));
        });
      }

      /*
       * There is no such things as public methods in jQuery plug-ins since
       * there is no console to perform commands from a client side point of
       * view. Typically only private methods will be fired by registered
       * events as on-click, on-drag, etc... Those registered events could be
       * seen as public methods.
       */

      // private method
      var stripAlphaChars = function(string) {
        var str = new String(string); 
        str = str.replace(/[^0-9]/g, ''); 
        return str;
      }

    });
  };

  // static public functions
  //jQuery.fn.inputmask.doSomething = function(attr) {

  //};

  // static public members
  //jQuery.fn.inputmask.someStaticPublicMember;

  // some default settings that can be overridden by either $$options or
  // metadata
  // If you need callback functions for the plug-in, this is where they get
  // set
  jQuery.fn.inputmask.defaults = {
    validators : []
  };
})(jQuery);

Чтобы использовать это просто сделайте:

$('#someElementId').inputmask({
  validators: ['digits','someOtherNotYetImplementedValidator']
});

SomeOtherNotYetImplementedValidator как раз для того, чтобы показать, как это можно расширить для дополнительных будущих масок/валидаторов. Вы можете добавить это или пропустить, это ничего не нарушает ;-)

Извинения за дополнительный беспорядок комментариев, я использую шаблон, который я создал для парней здесь на работе.

Надеюсь, это поможет, Ура

4
Tom Van Schoor

Вот способ с регулярным выражением:

$('input').bind('keypress', function (event) {
var regex = new RegExp("^[0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
   event.preventDefault();
   return false;
}

});

https://jsfiddle.net/astrapi69/qbk2vjty/1/

И вы можете изменить регулярное выражение на что-нибудь еще, если вы хотите ограничить другие символы, а не цифры.

3
Asterios Raptis

Обновленное решение для улучшения взаимодействия с пользователем, которое решает проблему копирования и вставки и заменяет устаревший атрибут keyCode:

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

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

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

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

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

3
mencargo

У меня была проблема с топ-ответом. Он не включает цифровую клавиатуру, и если нажать клавишу Shift + цифру, специальные знаки также не должны отображаться ... но это решение не позаботится об этом.

Лучшая ссылка, которую я нашел в этой теме, была такой: http://www.west-wind.com/weblog/posts/2011/Apr/22/Restricting-Input-in-HTML-Textboxes- to-Numeric-Values ​​

Я новичок в stackoverflow, поэтому я не знаю, смогу ли я просто отредактировать лучшее решение в топ-посте.

3
balrok

Чтобы более подробно остановиться на ответе № 3, я бы сделал следующее (ПРИМЕЧАНИЕ: по-прежнему не поддерживает вставку операций с помощью клавиатуры или мыши):

$('#txtNumeric').keypress(
            function(event) {
                //Allow only backspace and delete
                if (event.keyCode != 46 && event.keyCode != 8) {
                    if (!parseInt(String.fromCharCode(event.which))) {
                        event.preventDefault();
                    }
                }
            }
        );
3
Damiano Fusco

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

$(this).on( 'keypress', function( e )
{
    // Ensure that it is a number and stop the keypress
    if (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) {
        e.preventDefault();
    }
});  
3
Novasol

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

Смотрите это Fiddle

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

затем выполните следующий простой код. 

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

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

2
vibs2006

Этот код jQuery отфильтровывает символы, набранные в то время как ShiftCtrl или же 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
        }
    }
});
2
Patrick Coston

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

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

Вы можете использовать HTML5 input type number , чтобы ограничить только числовые записи:

<input type="number" name="someid" />

Это будет работать только в браузере жалоб HTML5. Убедитесь, что тип документа вашего HTML-документа:

<!DOCTYPE html>

Для общего назначения вы можете пройти валидацию JS, как показано ниже:

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

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

Если вы хотите разрешить десятичные дроби, замените «если условие» на это:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

Источник:Ввод текста HTML разрешен только числовой ввод

JSFiddle demo:http://jsfiddle.net/Gagan_Gami/nSjy7/333/

2
Gagan Gami

Это может быть излишним для того, что вы ищете, но я предлагаю плагин jQuery с именем autoNumeric () - это здорово! 

Вы можете ограничить только цифры, десятичную точность, максимальные/минимальные значения и многое другое.

http://www.decorplanit.com/plugin/

2
Ryan Charmley

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

Этот метод допускает только 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();
    }
});
2
SoN9ne

Вы можете использовать проверку 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] ...

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

$("input[type=number]").attr("type", "text").attr("pattern", "[0-9.]+");
1
jBelanger
/**
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 мс, что является ударом по производительности, поэтому прокомментировал эту часть.

1
dhinesh

добавьте ниже код в document.ready

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

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

Наслаждаться : 

var inputFilter = function (elem, cb) {
    /*
    *    /^-?\d*$/               restricts input to integer numbers
    *    /^\d*$/                 restricts input to unsigned integer numbers
    *    /^[0-9a-f]*$/i          restricts input to hexadecimal numbers
    *    /^-?\d*[.,]?\d*$/       restricts input to floating point numbers (allowing both . and , as decimal separator)
    *    /^-?\d*[.,]?\d{0,2}$/   restricts input to currency values (i.e. at most two decimal places)
    */
    bdy.on('input keydown keyup mousedown mouseup select contextmenu drop', elem, function () {
        if (cb(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);
        }
    });
};

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

inputFilter('#onlyDigitsInput', function (val) {
    return /^\d*$/.test(val);
});
0
Hooman

Я рекомендую также проверить event.metaKey. Если установлено значение true, пользователь может сделать что-то вроде cmd-A, чтобы выделить весь текст в поле. Вы должны это позволить.

0
Adriaan

Рефакторинг принятого ответа, так что комментарии больше не нужно использовать, потому что я ненавижу комментарии. Также это легче проверить с жасмином.

    allowBackspaceDeleteTabEscapeEnterPress: function(event){
    return ($.inArray(event.keyCode, [46, 8, 9, 27, 13, 190]) >= 0);
},
allowContorlAPress: function(event){
    return (event.keyCode == 65 && event.ctrlKey === true)
},
allowHomeEndLeftRightPress: function(event){
    return (event.keyCode >= 35 && event.keyCode <= 39)
},
theKeyPressedIsEditRelated: function (event) {
    return (this.allowBackspaceDeleteTabEscapeEnterPress(event)
            || this.allowContorlAPress(event)
            || this.allowHomeEndLeftRightPress(event));
},
isNotFromTheNumKeyPad: function (event) {
    return (event.keyCode < 96 || event.keyCode > 105);
},
isNotFromTopRowNumberKeys: function (event) {
    return (event.keyCode < 48 || event.keyCode > 57);
},
theKeyIsNonNumeric: function (event) {
   return (event.shiftKey
           || (this.isNotFromTopRowNumberKeys(event)
                && this.isNotFromTheNumKeyPad(event)));
},
bindInputValidator: function(){
    $('.myinputclassselector').keydown(function (event) {
        if(this.validateKeyPressEvent(event)) return false;
    });
},
validateKeyPressEvent: function(event){
    if(this.theKeyPressedIsEditRelated(event)){
        return;
    } else {
        if (this.theKeyIsNonNumeric(event)) {
            event.preventDefault();
        }
    }
}
0
branchgabriel

Это то, что я использую для проверки числовых значений для целочисленных значений или значений с плавающей запятой (ненавязчивый стиль с 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">

0
Ouatataz

Другой подход ниже. Это позаботится и о вставке. [это для буквенно-цифровой проверки]

//Input Validation
var existingLogDescription = "";

$('.logDescription').keydown(function (event) {
    existingLogDescription = this.value;

});


$('.logDescription').keyup(function () {
    if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
        alert("Log Description should contain alpha-numeric values only");
        this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
        this.value = existingLogDescription;
    }
});
0
Lijo

поместите класс во входной текст и назовите его only_numbers

положить код JQuery на странице 

$(document).ready(function() {
    $('.only_numbers').keyup(function() {
        var numbers = $(this).val();
        $(this).val(numbers.replace(/\D/, ''));
    });
});

повеселись :-)

0
Ali Raza

Этот ответ был идеальным, но мы можем даже сделать его лучше и мощнее, объединив его с плагином 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, оооооооооооо!) 

0
Tohid

Я соединил все ответы в одном и придумал следующий код:

jQuery('#input_id', function(e){
    // Allow: backspace, delete, tab, escape, enter
    if (jQuery.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode === 65 && e.ctrlKey === true) ||
        // Allow: Ctrl+C
        (e.keyCode === 67 && e.ctrlKey === true) ||
        // Allow: Ctrl+X
        (e.keyCode === 88 && e.ctrlKey === true) ||
        // Disallow several dots (allow 190 only if no dots found)
        (e.keyCode === 190 && jQuery(this).val().indexOf('.') == -1) ||
        // Bug in some Android devices where it is always 229
        (e.keyCode === 229) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        // let it happen, don't do anything
        return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});

Кроме того, форма должна иметь autocomplete="off". Без этой опции у вас могут возникнуть проблемы с алгоритмами автозаполнения на мобильных устройствах.

0
Valera Tumash

Проверьте, используется ли уже десятичная точка: -

        // Stop: Multiple decimal points
        if((e.keyCode == 190 || e.keyCode == 110) && ((this.value).indexOf(".") >= 0))
            e.preventDefault(); 
0
buzzmonkey

Я использую в этой форме. Мне кажется правильным разрешить такие ключи, как homeendshift а также 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(); 
        }   
    }
});
0
Rodolfo Jorge Nemer Nogueira

Используйте ниже простой jQuery, чтобы разрешить только числовые символы в tetbox. Вам не нужно вручную фильтровать все специальные символы, чтобы не пропустить какой-либо специальный символ. Это позволит использовать только цифры от 0 до 9: (поместите приведенный ниже код в готовый документ и измените имя класса в соответствии с вашими числовыми текстовыми полями.)

//Event of data being keyed in to textbox with class="numericField".
$(".numericField").keyup(function() {
    // Get the non Numeric char that was enetered
    var nonNumericChars = $(this).val().replace(/[0-9]/g, '');                                  
    // Now set the value in text box 
    $(this).val( $(this).val().replace(nonNumericChars, ''));    

});
0
Mrinal Jha
$(document).ready(function()
{
    $("#textBoxId").bind("change",checkInput);
});

function checkInput()
{
    // check if $('#textBoxId').val() is under your constraints
    // then change its value, removing the last character
    // since this event will be called each time you
    // type a character
}
0
Khaled.K

Попробуй это

$('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});
0
Rax Shah
jQuery("#no_of").keypress(function(event){
    //Allow only backspace and delete
    if (event.keyCode != 46 && event.keyCode != 8) {
        if (!parseInt(String.fromCharCode(event.which))) {
            event.preventDefault();
        }
    }
});

jQuery("#no_of").keyup(function(e){
    var temp_s= jQuery("#no_of").val();
    var multiply_val= temp_s*10;
    jQuery("#ex-r").html(multiply_val);
});
0
Nishant