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

Як це зробити за допомогою jQuery?

^{Примітка. Це оновлена ​​відповідь. У коментарях нижче йдеться про стару версію, яка переплуталася з клавішними кодами.}

jQuery

Спробуйте самі на JSFiddle .

Для цього немає вбудованої реалізації jQuery, але ви можете відфільтрувати вхідні значення тексту <input>за допомогою наступного inputFilterплагіна (підтримує Copy + Paste, Drag + Drop, комбінації клавіш, операції з контекстним меню, нестандартні клавіші, положення каретки, інше розкладки клавіатури та всі браузери з 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,'');
});

Але, що це за привілей коду?

• Він працює на мобільних браузерах (проблеми з клавіатурою та keyCode).
• Він працює і на вмісті, створеному AJAX, тому що ми використовуємо "увімкнено".
• Краща продуктивність, ніж натискання клавіш, наприклад, на пасті.

Короткий і солодкий - навіть якщо це не знайде багато уваги після 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 .

Атрибут шаблону в HTML5 визначає регулярне вираження, на яке перевіряється значення елемента.

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

Примітка: Атрибут шаблону працює з такими типами введення: текст, пошук, 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)');

функція suppressNonNumericInput (подія) {

    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 factory. Ви можете легко налаштувати, які символи дозволено легко.

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