^{Note: This is an updated answer. Comments below refer to an old version which messed around with keycodes.}

JavaScript

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

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

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, 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 = "";
      }
    });
  });
}

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

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

Дополнительные примеры входных фильтров см. В Демо JSFiddle. Также обратите внимание, что вы по-прежнему необходимо выполнить проверку на стороне сервера!

Машинопись

Вот версия этого TypeScript.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery

Также существует версия jQuery. См. этот ответ.

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.

2 решения:

Используйте валидатор формы (например, с плагин проверки jQuery)

Выполните проверку во время события onblur (т.е. когда пользователь покидает поле) поля ввода с регулярным выражением:

<script type = "text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type = "text" ... onblur = "testField(this);"/>

Вы можете попробовать использовать событие onkeydown и отменить событие (event.preventDefault или что-то в этом роде), если это не один из разрешенных ключей.

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

<input id = "FIELD_ID" name = "FIELD_ID" onkeypress = "return validateNUM(event,this);"  type = "text">

И фактический обработчик JavaScript будет:

function validateNUM(e,field)
{
    var key = getKeyEvent(e)
    if (specialKey(key)) return true;
    if ((key >= 48 && key <= 57) || (key == 46)){
        if (key != 46)
            return true;
        else{
            if (field.value.search(/\./) == -1 && field.value.length > 0)
                return true;
            else
                return false;
        }
    }

function getKeyEvent(e){
    var keynum
    var keychar
    var numcheck
    if (window.event) // IE
        keynum = e.keyCode
    else if (e.which) // Netscape/Firefox/Opera
        keynum = e.which
    return keynum;
}

Используйте этот DOM

<input type='text' onkeypress='validate(event)' />

И этот сценарий

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if ( !regex.test(key) ) {
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

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

В HTML5 есть <input type=number>, что вам подходит. В настоящее время только Opera поддерживает его изначально, но есть проект, который имеет реализацию JavaScript.

Спасибо, ребята, это действительно мне помогло!

Я нашел идеальный вариант, действительно полезный для базы данных.

function numonly(root){
    var reet = root.value;    
    var arr1=reet.length;      
    var ruut = reet.charAt(arr1-1);   
        if (reet.length > 0){   
        var regex = /[0-9]|\./;   
            if (!ruut.match(regex)){   
            var reet = reet.slice(0, -1);   
            $(root).val(reet);   
            }   
        }  
 }

Затем добавьте обработчик событий:

onkeyup = "numonly(this);"

И еще один пример, который мне отлично подходит:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

Также прикрепите к событию нажатия клавиши

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

И HTML:

<input type = "input" id = "edit1" value = "0" size = "5" maxlength = "5" />

Вот пример jsFiddle

Если вы хотите предложить устройству (например, мобильному телефону) буквенное или числовое значение, вы можете использовать <input type = "number">.

Я искал долго и упорно за хороший ответ на это, и мы отчаянно нуждаемся в <input type = "number", но мало того, что эти два являются наиболее лаконичными способами, которыми я мог бы придумать:

<input type = "text" 
       onkeyup = "this.value=this.value.replace(/[^\d]/,'')">

Если вам не нравится, что неприемлемый символ отображается на долю секунды перед тем, как его стереть, я могу использовать приведенный ниже метод. Обратите внимание на многочисленные дополнительные условия, чтобы избежать отключения всех видов навигации и горячих клавиш. Если кто-нибудь знает, как это уплотнить, дайте нам знать!

<input type = "text" 
onkeydown = "return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

Это улучшенная функция:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

Короткая и приятная реализация с использованием jQuery и replace () вместо просмотра event.keyCode или event.which:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Единственный небольшой побочный эффект в том, что набранная буква появляется на мгновение, а CTRL / CMD + A ведет себя немного странно.

HTML5 поддерживает регулярные выражения, поэтому вы можете использовать это:

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

Предупреждение: некоторые браузеры еще не поддерживают это.

Более безопасный подход - это проверка значения ввода вместо перехвата нажатий клавиш и попыток фильтрации кодов клавиш.

Таким образом, пользователь может свободно использовать стрелки клавиатуры, клавиши-модификаторы, backspace, delete, использовать нестандартные клавиатуры, использовать мышь для вставки, использовать перетаскивание текста и даже использовать специальные возможности ввода.

В приведенном ниже сценарии разрешены положительные и отрицательные числа.

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}

<input id = "number" value = "-3.1415" placeholder = "Type a number" autofocus>

Обновлено: я удалил свой старый ответ, потому что думаю, что сейчас он устарел.

Вы также можете сравнить входное значение (которое по умолчанию рассматривается как строка) с самим собой, принудительно используемым как числовое, например:

if (event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

Однако вам нужно привязать это к событию, например keyup и т. д.

Просто другой вариант с jQuery с использованием

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

Вы можете заменить функцию Шурока на:

$(".numeric").keypress(function() {
    return (/[0123456789,.]/.test(String.fromCharCode(Event.which) ))
});

Я понимаю старый пост, но я думал, что это может кому-то помочь. Недавно мне пришлось ограничить текстовое поле всего 5 знаками после запятой. В моем случае ТАКЖЕ ввод пользователя должен был быть меньше 0,1

<input type = "text" value = "" maxlength=7 style = "width:50px" id = "fmargin" class = "formText"  name = "textfield" onkeyup = "return doCheck('#fmargin',event);">

Вот функция doCheck

function doCheck(id,evt)
{
    var temp=parseFloat($(id).val());

    if (isNaN(temp))
        temp='0.0';
    if (temp==0)
        temp='0.0';

    $(id).val(temp);
}

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

function doCheck(id,evt)
{
    var temp=parseInt($(id).val());

    if (isNaN(temp))
        temp='0';

    $(id).val(temp);
}

надеюсь, что это поможет кому-то

Код JavaScript:

function validate(evt)
{
    if (evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

HTML код:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

работает отлично, потому что код клавиши Backspace равен 8, а выражение регулярного выражения не позволяет этого, так что это простой способ обойти ошибку :)

Это расширенная версия Решение geowa4. Поддерживает атрибуты min и max. Если число вне допустимого диапазона, будет показано предыдущее значение.

Вы можете проверить это здесь.

Использование: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if (key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if ( !regex.test(key)) {
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if ( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

Если входы динамические, используйте это:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if ( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});

Лучший способ (разрешить ВСЕ типы чисел - действительные отрицательные, действительные положительные, целочисленные отрицательные, целочисленные положительные):

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if (!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if (theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

JavaScript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

дополнительно вы можете добавить запятую, точку и минус (, .-)

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type = "text" onkeydown = "validateNumber(event);"/ >

Я немного подправил его, но для соответствия странному пути JavaScript требуется гораздо больше работы.

function validateNumber(myEvent,decimal) {
    var e = myEvent || window.event;
    var key = e.keyCode || e.which;

    if (e.shiftKey) {
    } else if (e.altKey) {
    } else if (e.ctrlKey) {
    } else if (key === 48) { // 0
    } else if (key === 49) { // 1
    } else if (key === 50) { // 2
    } else if (key === 51) { // 3
    } else if (key === 52) { // 4
    } else if (key === 53) { // 5
    } else if (key === 54) { // 6
    } else if (key === 55) { // 7
    } else if (key === 56) { // 8
    } else if (key === 57) { // 9

    } else if (key === 96) { // Numeric keypad 0
    } else if (key === 97) { // Numeric keypad 1
    } else if (key === 98) { // Numeric keypad 2
    } else if (key === 99) { // Numeric keypad 3
    } else if (key === 100) { // Numeric keypad 4
    } else if (key === 101) { // Numeric keypad 5
    } else if (key === 102) { // Numeric keypad 6
    } else if (key === 103) { // Numeric keypad 7
    } else if (key === 104) { // Numeric keypad 8
    } else if (key === 105) { // Numeric keypad 9

    } else if (key === 8) { // Backspace
    } else if (key === 9) { // Tab
    } else if (key === 13) { // Enter
    } else if (key === 35) { // Home
    } else if (key === 36) { // End
    } else if (key === 37) { // Left Arrow
    } else if (key === 39) { // Right Arrow
    } else if (key === 190 && decimal) { // decimal
    } else if (key === 110 && decimal) { // period on keypad
    // } else if (key === 188) { // comma
    } else if (key === 109) { // minus
    } else if (key === 46) { // Del
    } else if (key === 45) { // Ins
    } else {
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

И затем он вызывается через:

$('input[name=Price]').keydown(function(myEvent) {
    validateNumber(myEvent,true);
});

Еще один простой способ с jQuery:

$('.Numeric').bind('keydown',function(e){
    if (e.which < 48 || e.which > 57)
        return false;
    return true;
})

Теперь просто установите для каждого класса входов значение Numeric, например:

<input type = "text" id = "inp2" name = "inp2" class='Numeric' />

Это мгновенно удаляет все плохие символы, позволяет использовать только одну точку, является коротким, позволяет вернуться на место и т. Д .:

$('.numberInput').keyup(function () {
    s=$(this).val();
    if (!/^\d*\.?\d*$/.test(s)) $(this).val(s.substr(0,s.length-1));
});

Так просто....

// В функции JavaScript (можно использовать HTML или PHP).

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

В вашем вводе формы:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

С входом макс. (Это выше позволяет использовать 12-значное число)

Используйте этот DOM:

<input type = "text" onkeydown = "validate(event)"/>

И этот скрипт:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if (evt.preventDefault){evt.preventDefault();}
    }
}

... ИЛИ этот сценарий без indexOf с использованием двух for ...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if (evt.preventDefault){evt.preventDefault();}
    }
}

Я использовал атрибут onkeydown вместо onkeypress, потому что атрибут onkeydown проверяется перед атрибутом onkeypress. Проблема будет в браузере Google Chrome.

С атрибутом «onkeypress» TAB будет неконтролируемым с помощью «preventDefault» в google chrome, однако с атрибутом «onkeydown» TAB станет управляемым!

Код ASCII для TAB => 9

Первый сценарий имеет меньше кода, чем второй, однако в массиве символов ASCII должны быть все ключи.

Второй сценарий намного больше первого, но для массива не нужны все ключи. Первая цифра в каждой позиции массива - это количество раз, когда каждая позиция будет прочитана. Для каждого показания будет увеличиваться на 1 до следующего. Например:




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




В случае числовых ключей их всего 10 (0 - 9), но если бы их было 1 миллион, не было бы смысла создавать массив со всеми этими ключами.

Коды ASCII:

• 8 ==> (Backspace);
• 46 => (Удалить);
• 37 => (стрелка влево);
• 39 => (стрелка вправо);
• 48 - 57 => (числа);
• 36 => (дом);
• 35 => (конец);

Вызовите эту функцию, когда будете готовы проверить что-либо. Я использовал здесь текстовое поле

В моем HTML:

<input type = "button" value = "Check IT!" onclick = "check(document.getElementById('inputboxToValidate').value);" />

В моем коде JavaScript:

function check(num){
    var onlynumbers = true
    for (var i = 0; i < (num.length - 1); i++) {
        if (num.substr(i, 1) != "0" || num.substr(i, 1) != "1" || num.substr(i, 1) != "2" || num.substr(i, 1) != "3" || num.substr(i, 1) != "4" || num.substr(i, 1) != "5" || num.substr(i, 1) != "6" || num.substr(i, 1) != "7" || num.substr(i, 1) != "8" || num.substr(i, 1) != "9") {
            alert("please make sure that only numbers have been entered in the Quantaty box");
            onlynumbers = false
        }
    }
    if (onlynumbers == true) {

        //Execute Code
    }
}

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

<input type = "number" />

а также

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

<input type = "text" onkeypress = "return isNumberKey(event);">

<input name = "amount" type = "text" value = "Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

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

function validateInput() {
   if (jQuery('#x1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null || 
       jQuery('#x2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null || 
       jQuery('#y1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
       jQuery('#y2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null) {
         alert("A number must be entered for each coordinate, even if that number is 0. Please try again.");
         location.reload();
   }
}

input type = "number" - это атрибут HTML5.

В другом случае это поможет вам:

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

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

Для этого можно использовать шаблон:

<input id = "numbers" pattern = "[0-9.]+" type = "number">

Здесь вы можете увидеть полные советы по интерфейсу мобильного сайта..

function digitsOnly(obj) {
   obj.value = obj.value.replace(/\D/g, "");
}

и в элементе

<input type = "text" onkeyup = "digitsOnly(this);" />

Да, HTML5 умеет. Попробуйте этот код (w3school):

<!DOCTYPE html>
<html>
<body>

<form action = "">
  Quantity (between 1 and 5): <input type = "number" name = "quantity" min = "1" max = "5" />
  <input type = "submit" />
</form>

</body>
</html>

Я использую библиотеку jquery.inputmask.js, которую вы можете скачать с NuGet. В частности, я использую jquery.inputmask.regex.extensions.js, который идет с ним.

Я даю элемент ввода класс, в данном случае reg:

<input type = "number" id = "WorkSrqNo" name = "WorkSrqNo" maxlength = "6" class = "reg"/>

А затем в JavaScript я установил маску:

var regexDigitsOnly = "^[0-9]*$";
$('input.reg').inputmask('Regex', { regex: regexDigitsOnly });

Это только для цифр, но вы можете изменить регулярное выражение, чтобы оно принимало ".".

С его помощью невозможно вводить символы, не являющиеся цифрами. Полезно иметь эти библиотеки входных масок для общего форматирования.

Если вы не против использовать плагины, вот один из них, который я тестировал. Работает хорошо, кроме пасты.

Числовой ввод

Вот демо http://jsfiddle.net/152sumxu/2

Код ниже (Lib вставлен в строку)

<div id = "plugInDemo" class = "vMarginLarge">
    <h4>Demo of the plug-in    </h4>
    <div id = "demoFields" class = "marginSmall">
        <div class = "vMarginSmall">
            <div>Any Number</div>
            <div>
                <input type = "text" id = "anyNumber" />
            </div>
        </div>
    </div>
</div>

<script type = "text/javascript">
    //    Author: Joshua De Leon - File: numericInput.js - Description: Allows only numeric input in an element. - If you happen upon this code, enjoy it, learn from it, and if possible please credit me: www.transtatic.com
    (function(b) {
        var c = { allowFloat: false, allowNegative: false};
        b.fn.numericInput = function(e) {
            var f = b.extend({}, c, e);
            var d = f.allowFloat;
            var g = f.allowNegative;
            this.keypress(function(j) {
                var i = j.which;
                var h = b(this).val();
                if (i>0 && (i<48 || i>57)) {
                    if (d == true && i == 46) {
                        if (g == true && a(this) == 0 && h.charAt(0) == "-") {
                            return false
                        }
                        if (h.match(/[.]/)) {
                            return false
                        }
                    }
                    else {
                        if (g == true && i == 45) {
                            if (h.charAt(0) == "-") {
                                return false
                            }
                            if (a(this) != 0) {
                                return false
                            }
                        }
                        else {
                            if (i == 8) {
                                return true
                            }
                            else {
                                return false
                            }
                        }
                    }
                }
                else {
                    if (i>0 && (i >= 48 && i <= 57)) {
                        if (g == true && h.charAt(0) == "-" && a(this) == 0) {
                            return false
                        }
                    }
                }
            });
            return this
        };
        function a(d) {
            if (d.selectionStart) {
                return d.selectionStart
            }
            else {
                if (document.selection) {
                    d.focus();
                    var f = document.selection.createRange();
                    if (f == null) {
                        return 0
                    }
                    var e = d.createTextRange(), g = e.duplicate();
                    e.moveToBookmark(f.getBookmark());
                    g.setEndPoint("EndToStart", e);
                    return g.text.length
                }
            }
            return 0
        }
    }(jQuery));

    $(function() {
       $("#anyNumber").numericInput({ allowFloat: true, allowNegative: true });
    });
</script>

Использовать:

<script>
    function onlyNumber(id){ 
        var DataVal = document.getElementById(id).value;
        document.getElementById(id).value = DataVal.replace(/[^0-9]/g,'');
    }
</script>
<input type = "text" id = "1" name = "1" onChange = "onlyNumber(this.id);">

И если вы хотите обновить значение после нажатия клавиши, вы можете изменить по изменению на onKeypress, onKeyDown или onKeyup. Но событие onKeypress не работает ни в одном браузере.

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

<input type = "text" oninput = "this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" />

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

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

Это простое решение, кажется, лучше всего работает для меня на кросс-платформе, независимо от механизма ввода (нажатие клавиши, копирование + вставка, копирование + вставка правой кнопкой мыши, преобразование речи в текст и т. д.). Все макросы клавиатуры для выделения текста по-прежнему будут работать, и это даже ограничит возможность установки нечислового значения с помощью сценария.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type = "number"]', forceNumeric);

Приведенный ниже код также проверяет наличие события ВСТАВИТЬ. Раскомментируйте "ruleSetArr_4" и добавьте (объедините) к "ruleSetArr", чтобы разрешить номера ПЛАВАТЬ.
Легкая функция копирования / вставки. Вызовите его с вашим элементом ввода в параметре.
Пример: inputIntTypeOnly($('input[name = "inputName"]'))

function inputIntTypeOnly(elm){
    elm.on("keydown",function(event){
        var e = event || window.event,
            key = e.keyCode || e.which,
            ruleSetArr_1 = [8,9,46], // backspace,tab,delete
            ruleSetArr_2 = [48,49,50,51,52,53,54,55,56,57],	// top keyboard num keys
            ruleSetArr_3 = [96,97,98,99,100,101,102,103,104,105], // side keyboard num keys
            ruleSetArr_4 = [17,67,86],	// Ctrl & V
          //ruleSetArr_5 = [110,189,190], add this to ruleSetArr to allow float values
            ruleSetArr = ruleSetArr_1.concat(ruleSetArr_2,ruleSetArr_3,ruleSetArr_4);	// merge arrays of keys
		
            if (ruleSetArr.indexOf() !== "undefined"){	// check if browser supports indexOf() : IE8 and earlier
                var retRes = ruleSetArr.indexOf(key);
            } else { 
                var retRes = $.inArray(key,ruleSetArr);
            };
            if (retRes == -1){	// if returned key not found in array, return false
                return false;
            } else if (key == 67 || key == 86){	// account for paste events
                event.stopPropagation();
            };

    }).on('paste',function(event){
        var $thisObj = $(this),
            origVal = $thisObj.val(),	// orig value
            newVal = event.originalEvent.clipboardData.getData('Text');	// paste clipboard value
        if (newVal.replace(/\D+/g, '') == ""){	// if paste value is not a number, insert orig value and ret false
            $thisObj.val(origVal);
            return false;
        } else {
            $thisObj.val(newVal.replace(/\D+/g, ''));
            return false;
        };
		
    });
};

var inptElm = $('input[name = "inputName"]');

inputIntTypeOnly(inptElm);

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type = "text" name = "inputName" value = "1">

Для тех из вас, кому нравится однострочные.

string.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');

Я использую этот код для input type = "text" и с AngularJS для активации при нажатии клавиши, но вы можете использовать jQuery, если хотите. Просто поместите этот код в функцию, которая каким-либо образом активируется при нажатии клавиши.

Он разрешает только цифры, цифры + десятичные числа, цифры + десятичные числа + цифры.

КОД

YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');

testOne = "kjlsgjkl983724658.346.326.326..36.346"
=> "983724658.34";

testTwo = ".....346...3246..364.3.64.2346......"
=> "346.";

testThree = "slfdkjghsf)_(*(&^&*%^&%$%$%^KJHKJHKJKJH3"
=> "3";

testFour = "622632463.23464236326324363"
=> "622632463.23";

Это было построено для валюты США, но его можно изменить, чтобы разрешить более двух десятичных знаков после первого десятичного знака, как в следующем ...

ИЗМЕНЕННЫЙ КОД

YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d*)(.*)/, '$1');

testFour = "dfskj345346346.36424362jglkjsg....."
=> "345346346.36424362";

:)

Искал способ заблокировать ввод чисел, потом, так как в ответах не нашел, у меня этот код работал нормально.

Мне просто нужно ввести его в событие onkeypress.

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

onkeypress = "if (event.which < 48 || event.which > 57 ) if (event.which != 8) if (e.keyCode != 9) return false;"

Дайте полю ввода класс (<input class = "digit" ...>) и используйте jquery, как показано ниже.

jQuery(document).ready(function () {
            jQuery('input.digit').live('input keyup',function(e){ jQuery(this).val(jQuery(this).val().replace( /[^\d]/g ,'')); });
});

Приведенный выше код также работает для отключения специальных символов в штрихах Ctrl+V и штрихов right click.

Я лично предлагаю использовать плагин autoNumeric от http://www.decorplanit.com/plugin/ - он поддерживает все различные варианты, такие как обработка префиксов / суффиксов, обработка валюты, форматирование отрицательных значений, min, max и т. д.

У меня может быть другой (простой) обходной путь для этого ...

Поскольку String.fromCharCode (key) возвращает странные вещи на клавиатуре AZERTY (цифровая клавиатура возвращает код как g для 1 и 1 для символа & ..

Я понял, что захват последнего значения на клавиатуре внутри ввода, чтобы сбросить его до произвольного значения, является более простым, легким и защищенным от ошибок методом (также можно сделать с помощью некоторого регулярного выражения ... для сохранения десятичных знаков и так далее ... не надо '' нет необходимости фильтровать другие события Ctrl, Home, Del и Enter ...)

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

<input class='pn'>
<script>
function pn(el){nb=el.value;if (isNaN(nb) || nb<1)el.value=1;}
jQuery('.pn').keyup(function(){pn(this);});
</script>

Атрибут Onkeyup:

<input onkeyup='positiveNumericInput(this)'>
<script>function positiveNumericInput(el){nb=el.value;if (isNaN(nb) || nb<1)el.value=1;}</script>

Когда дело доходит до защиты от ошибок UX, всегда следует стараться сохранять ориентир для «интеллекта пользователя».

Пренебрегая всем, кроме цифр, точка и дефис кажутся идеальным выбором, вам также следует подумать о том, чтобы разрешить им введите любой контент, а когда он будет готов, очистите ввод; если не действительный номер, показать ошибку. Этот метод гарантирует, что независимо от того, что пользователю удастся сделать, результат всегда будет действительным. Если пользователь достаточно наивен, чтобы не понимать предупреждений и сообщений об ошибках, нажатие кнопки и наблюдение за тем, что ничего не происходит (как при сравнении кодов клавиш), только еще больше запутает его.

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

1. On losing-focus or form-submission, do following.

   1.1. Read content from the input and apply parseFloat to result

   1.2. If the result is a Non-accessible-Number (NaN), reset the input field and pop-up an error message: "Please enter a valid number: eg. 235 or -654 or 321.526 or -6352.646584".

   1.3. Else, if String(result)!==(content from input), change value of the field to result and show warning message: "The value you entered have been modified. Input must be a valid number: eg. 235 or -654 or 321.526 or -6352.646584". For a field that cannot allow any unconfirmed value, then this condition may be added to step 1.2.

   1.4. Else, do nothing.

Этот метод также дает вам дополнительное преимущество, заключающееся в выполнении проверки на основе минимальное значение, максимальное значение, десятичные разряды и т. д., если это необходимо. Просто нужно проделать эти операции с результатом после шага 1.2.

Недостатки:

1. Ввод позволяет пользователю вводить любое значение до тех пор, пока фокус не будет потерян или форма не будет отправлена. Но если бы инструкции по заполнению поля были достаточно четкими, в 90% случаев это могло бы не появиться.

2. Если шаг 1.3 используется для отображения предупреждения, он может быть пропущен пользователем и может привести к непреднамеренной отправке ввода. Эту проблему решит сообщение об ошибке или правильное отображение предупреждения.

3. Скорость. Это может быть медленнее в микросекундах, чем метод регулярного выражения.

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

1. Широкие возможности настройки с опциями.

2. Работает кроссбраузерно и независимо от языка.

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

Надеюсь, я здесь не бью мертвую лошадь уродливой палкой, но я использую это для ввода количества на моем веб-сайте, он допускает только числа от 1 до 99.

Попытайся: https://jsfiddle.net/83va5sb9/

      <input min = "1" type = "text" id = "quantity" name = "quantity" value = "1"
      onKeyUp = "numbersonly()">

      <script>
    function numbersonly() {
      var str = document.getElementById("quantity").value
      var newstr = ""
      for (i = 0; i < str.length; i++) {
        for (ii = 1; ii < 10; ii++) {
          if (str.charAt(i).indexOf(ii) > -1) {
            newstr += str.charAt(i)
          }
        }
      }
      if (newstr == "") {
        newstr = 1
      }
      if (parseInt(newstr) > 99) {
        newstr = 99
      }
      document.getElementById("quantity").value = newstr
    }

    </script>

Мое решение для лучшего взаимодействия с пользователем:

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

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

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

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

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

Найдите нижеприведенное решение. В этом режиме пользователь может ввести только значение numeric. Также пользователь не может вводить значения copy, paste, drag и drop.

Allowed Characters

0,1,2,3,4,5,6,7,8,9

Not allowed Characters and Characters through events

• Буквенное значение
• Специальные символы
• Копировать
• Вставить
• Тащить
• Уронить

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet"/>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type = "text" class = "form-control" name = "number" id = "number" onkeypress = "return isNumberKey(event)" placeholder = "Enter Numeric value only">

Сообщите мне, если это не сработает.

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

<input type = "text" class = "form-control" id = "phone" name = "phone" placeholder = "PHONE" spellcheck = "false" oninput = "this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

Вот хорошее простое решение, которое мне нравится использовать:

function numeric_only (event, input) {
    if ((event.which < 32) || (event.which > 126)) return true; 
    return jQuery.isNumeric ($(input).val () + String.fromCharCode (event.which));
}// numeric_only;

<input type = "text" onkeypress = "return numeric_only (event, this);" />

Объяснение:

Используя "event.which" - сначала определите, является ли это печатным символом. Если это не так, разрешите это (для таких вещей, как удаление и возврат). В противном случае соедините символ с концом строки и проверьте его с помощью функции jQuery "isNumeric". Это избавляет от утомительного тестирования каждого отдельного персонажа, а также работает для сценариев вырезания / вставки.

Если вы хотите выглядеть по-настоящему симпатичным, вы можете создать новый тип ввода HTML. Назовем его "числовым", чтобы у вас был тег:

<input type = "numeric" />

который допускает только числовые символы. Просто добавьте следующую команду «document.ready»:

$(document).ready (function () {
    $("input[type=numeric]").keypress (function (event) {
        if ((event.which < 32) || (event.which > 126)) return true; 
        return jQuery.isNumeric ($(this).val () + String.fromCharCode (event.which));
    });// numeric.keypress;
});// document.ready;

HTML не волнует, какое имя типа вы используете - если он не распознает его, он будет использовать текстовое поле по умолчанию, так что вы можете это сделать. Ваш редактор может жаловаться, но это проблема. Без сомнения, пуритане взбесятся, но это работает, легко и до сих пор было для меня довольно надежным.

просто используйте type = "число", теперь этот атрибут поддерживается в большинстве браузеров

<input type = "number" maxlength = "3" ng-bind = "first">

Это простое решение

Замените .price-input input.quantity на класс вашего input feild

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

Вот очень короткое решение, которое не использует устаревшие keyCode или which, не блокирует никакие не входные ключи и использует чистый javascript. (Проверено в Chromium 70.0.3533, Firefox 62.0 и Edge 42.17134.1.0)

HTML:

<input type = "text" onkeypress = "validate(event)">

JS:

function validate(ev) {
    if (!ev) {
        ev = window.event;
    }

    if (!ev.ctrlKey && ev.key.length === 1 && (isNaN(+ev.key) || ev.key === " ")) {
        return ev.preventDefault();
    }
}

Простой способ решить эту проблему - реализовать функцию jQuery для проверки с помощью регулярного выражения символов, введенных в текстовое поле, например:

Ваш html-код:

<input class = "integerInput" type = "text">

И функция js с использованием jQuery

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });

<script
			  src = "https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity = "sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 = "
			  crossorigin = "anonymous">
</script>

<input type = "text" class = "integerInput"/>


		

это также работает для персидского и арабского чисел :)

 setNumericInput: function (event) {
          var key = window.event ? event.keyCode : event.which
          if (event.keyCode === 8 ||
        (key >= 48 && key <= 57) ||
        (key >= 1776 && key <= 1785)) {
            return true
          } else {
            event.preventDefault()
          }
        }

Я видел несколько отличных ответов, но мне они нравятся настолько маленькими и простыми, насколько это возможно, так что, возможно, кому-то это пригодится. Я бы использовал функции javascript Number() и isNaN следующим образом:

if (isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

Надеюсь это поможет.

Я закончил использовать эту функцию:

onkeypress = "if (event.which < 48 || event.which > 57 ) if (event.which != 8) return false;"

Это хорошо работает в IE и Chrome, я не знаю, почему это не работает и в Firefox, эта функция блокирует клавишу табуляции в Firefox.

Для клавиши табуляции отлично работает в firefox, добавьте это:

onkeypress = "if (event.which < 48 || event.which > 57 ) if (event.which != 8) if (event.keyCode != 9) return false;"

Если вы пытаетесь использовать angular, это может помочь

Чтобы получить ввод как число (с десятичной точкой), тогда

<input [(ngModel)] = "data" oninput = "this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

Теперь это не будет правильно обновлять значение в модели чтобы явно изменить значение модели, добавьте это

<input [(ngModel)] = "data" oninput = "this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" (change) = "data = $event.target.value">

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

Ниже функция будет проверять, является ли каждый входной символ числом.

numeric: value => {
    let numset = new Set(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']);
    console.info(numset.has(value.substring(value.length - 1, value.length)));
}

Я не смог найти четкого ответа, который не перебирает всю строку каждый раз, поэтому вот:

document.querySelectorAll("input").forEach(input => {
  input.addEventListener("input", e => {
    if (isNaN(Number(input.value[input.value.length-1])) && input.value[input.value.length-1] != '.') {
      input.value = input.value.slice(0, -1);
    }
  })
});

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

<input type = "tel" 
          onkeypress = "return onlyNumberKey(event)">

в теге скрипта

function onlyNumberKey(evt) { 
      
      // Only ASCII charactar in that range allowed 
      var ASCIICode = (evt.which) ? evt.which : evt.keyCode 
      if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57)) 
          return false; 
      return true; 
} 

Существует гораздо более простое решение, о котором никто не упоминал ранее:

inputmode = "numeric"

подробнее: https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/