Используйте эту 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();
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

//В функции 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-значное число)

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

Разрешенные символы

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

Не допускается Символы и символы через события

• Алфавитное значение
• Специальные символы
• Копировать
• Вставить
• Перетащите
• Падение

$(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="/bootstrap.min.css" rel="stylesheet"/>
<script src="/jquery.min.js"></script>

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

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

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

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

Ниже script допускаются положительные и отрицательные числа

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>

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

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

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

Здесь вы можете ознакомиться со всеми советами веб-сайта для мобильных устройств.

Код 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, и выражение регулярного выражения не позволяет ему, поэтому это простой способ обойти ошибку:)

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

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

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

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

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

Просто другой вариант с jQuery с помощью

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

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

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

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

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

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

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

<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');">

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

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

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

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

И этот script:

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

... ИЛИ это script, без indexOf, используя два for 's...

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

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

Второй script намного больше первого, но массиву не нужны все ключи. Первая цифра в каждой позиции массива - это количество раз, когда каждая позиция будет считана. Для каждого чтения будет увеличено 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 = > (home);
• 35 = > (конец);

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

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

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

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

Это расширенная версия решения 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'));
            }
    }); 
});

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

Замените входной вход.price-input.quantity с классом вашего ввода 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();
        }
    });

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

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

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

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 функции, одна для обычного ввода пользователя (keypress), а другая для исправления (изменения) для копирования + вставки, другие комбинации давали бы мне ужасное чувство пользователя.

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

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

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

Так как String.fromCharCode(key) возвращает странные вещи на клавиатуре AZERTY (числовая клавиатура возвращает код как g для 1 и 1 для и символ.

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

Введите поле ввода класс (<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 штрихи.

Код ниже также будет проверять событие PASTE.
Раскомментируйте "ruleSetArr_4" и добавьте (concate) в "ruleSetArr", чтобы разрешить номера FLOAT.
Легкая функция копирования/вставки. Вызовите его с помощью элемента ввода в параметре.
Пример: 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="/jquery.min.js"></script>
<input type="text" name="inputName" value="1">

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

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

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

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

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

Вот демон 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>

Я использую библиотеку 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 });

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Allow Only Numbers
</HEAD>

<BODY>
<script language="JavaScript">
function onlyNumbers(evt)
{
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;

if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;

return true;

}
</script>
<input type="text" onkeypress="return onlyNumbers();">
</BODY>
</HTML>

Вы можете заменить функцию Shurok следующим образом:

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

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

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

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

Простой способ решить эту проблему - реализовать функцию 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="/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

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


		

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

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

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

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

CODE

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

:)

Да, 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>

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

и в элементе

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

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

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

Еще один простой способ с 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' />

Я немного изменил его, но ему нужно намного больше работы, чтобы соответствовать сценарию 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);
});

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

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

Вот очень короткое решение, в котором не используется устаревший 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();
    }
}

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

Когда дело доходит до безупречного UX, всегда нужно пытаться сохранить контрольную точку для "пользовательского интеллекта".

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

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

• В случае потери фокуса или представления формы выполните следующие действия.

  1,1. Прочитайте содержимое из ввода и примените parseFloat для результата

  1,2. Если результатом является недопустимое число (NaN), reset поле ввода и всплывающее сообщение : "Пожалуйста, введите действительный номер: например. 235 или -654 или 321,526 или -6352,646584".

  1,3. Else, если String (result)! == (содержимое с ввода), измените значение поля на результат и покажите предупреждающее сообщение: "Значение, которое вы введены были изменены. Вход должен быть действительным числом: например. 235 или -654 или 321.526 или -6352.646584". Для поля, которое не может позволить любое неподтвержденное значение, это условие может быть добавлено к шагу 1.2.

  1,4. Иначе ничего не делайте.

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

Недостатки:

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

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

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

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

• Высоко настраиваемый с параметрами.

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

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

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

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

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

В моем 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
    }
}

Я понимаю старый пост, но я думал, что это может помочь кому-то. Недавно мне пришлось ограничить текстовое поле до 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);
}

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

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

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

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

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

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

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

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

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

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