Я успешно реализовал множество форм с помощью jquery.numeric plugin.

 $(document).ready(function(){ $(".numeric").numeric(); }); . $(document).ready(function(){ $(".numeric").numeric(); }); 

Кроме того, это работает и с textareas!

EDIT: – При более широкой поддержке новых стандартов HTML мы можем использовать атрибут pattern и тип number для input элементов для ограничения ввода только числа. Он также работает для ограничения вставки нечислового содержимого. Более подробная информация о number и других более новых типах ввода доступна здесь .

Если вы хотите ограничить ввод (в отличие от проверки), вы можете работать с ключевыми событиями. что-то вроде этого:

А также:

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

Это немедленно позволяет пользователю узнать, что они не могут вводить альфа-символы и т. Д., А не позже на этапе проверки.

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

Я думал, что лучшим ответом был тот, что был выше, чтобы просто сделать это.

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

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

Я добавил простое изменение

 $('.numbersOnly').keyup(function () { if (this.value != this.value.replace(/[^0-9\.]/g, '')) { this.value = this.value.replace(/[^0-9\.]/g, ''); } }); 

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

В jQuery.numeric плагин есть некоторые ошибки, которые я уведомил автора. Он позволяет использовать несколько десятичных точек в Safari и Opera, и вы не можете вводить backspace, клавиши со стрелками или несколько других управляющих символов в Opera. Мне нужен положительный целочисленный ввод, поэтому я в конце концов просто написал свой собственный.

 $(".numeric").keypress(function(event) { // Backspace, tab, enter, end, home, left, right // We don't support the del key in Opera because del == . == 46. var controlKeys = [8, 9, 13, 35, 36, 37, 39]; // IE doesn't support indexOf var isControlKey = controlKeys.join(",").match(new RegExp(event.which)); // Some browsers just don't raise events for control keys. Easy. // eg Safari backspace. if (!event.which || // Control keys in most browsers. eg Firefox tab is 0 (49 <= event.which && event.which <= 57) || // Always 1 through 9 (48 == event.which && $(this).attr("value")) || // No 0 first digit isControlKey) { // Opera assigns values for control keys. return; } else { event.preventDefault(); } }); 

Больше нет плагинов, jQuery внедрил свой собственный jQuery.isNumeric (), добавленный в v1.7.

jQuery.isNumeric( value )

Определяет, является ли его аргумент числом.

Результаты опроса

 $.isNumeric( "-10" ); // true $.isNumeric( 16 ); // true $.isNumeric( 0xFF ); // true $.isNumeric( "0xFF" ); // true $.isNumeric( "8e5" ); // true (exponential notation string) $.isNumeric( 3.1415 ); // true $.isNumeric( +10 ); // true $.isNumeric( 0144 ); // true (octal integer literal) $.isNumeric( "" ); // false $.isNumeric({}); // false (empty object) $.isNumeric( NaN ); // false $.isNumeric( null ); // false $.isNumeric( true ); // false $.isNumeric( Infinity ); // false $.isNumeric( undefined ); // false 

Вот пример того, как связать isNumeric () с прослушивателем событий

 $(document).on('keyup', '.numeric-only', function(event) { var v = this.value; if($.isNumeric(v) === false) { //chop off the last char entered this.value = this.value.slice(0,-1); } }); 

Плагин numeric (), упомянутый выше, не работает в Opera (вы не можете отступать, удалять или даже использовать клавиши «назад» или «вперед»).

Код ниже как в JQuery, так и в Javascript будет работать отлично (и это всего две строки).

JQuery:

 $(document).ready(function() { $('.key-numeric').keypress(function(e) { var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/); if (verified) {e.preventDefault();} }); }); 

Javascript:

 function isNumeric(e) { var keynum = (!window.event) ? e.which : e.keyCode; return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/)); } 

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

Вы можете использовать плагин Validation с его методом number () .

 $("#myform").validate({ rules: { field: { required: true, number: true } } }); 

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

Он также принимает действительные int & float оба значения.

Подход Javascript

 onload =function(){ var ele = document.querySelectorAll('.number-only')[0]; ele.onkeypress = function(e) { if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false; } ele.onpaste = function(e){ e.preventDefault(); } } 

 
 Input box that accepts only valid int and float values.
  

Ниже я использую, чтобы буквально блокировать нажатия клавиш. Это позволяет только числа 0-9 и десятичную точку. Легко реализовать, не много кода и работает как шарм:

Как небольшое улучшение этого предложения , вы можете использовать плагин Validation с его числами () , цифрами и методами диапазона . Например, следующее гарантирует, что вы получите положительное целое число от 0 до 50:

 $("#myform").validate({ rules: { field: { required: true, number: true, digits: true, range : [0, 50] } } }); 

Вы не видите алфавитов магического вида и исчезновения на клавише вниз. Это также работает на мышиной пасте.

 $('#txtInt').bind('input propertychange', function () { $(this).val($(this).val().replace(/[^0-9]/g, '')); }); 

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

В поисках других решений я нашел это:

Целые числа (неотрицательные)

  
 
Enter numbers only: 
  

Источник: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example Пример Live: http://jsfiddle.net/u8sZq/

Десятичные точки (неотрицательные)

Чтобы разрешить одну десятичную точку, вы можете сделать что-то вроде этого:

Источник: Просто написал это. Кажется, работает. Пример: http://jsfiddle.net/tjBsF/

Другие настройки

• Чтобы позволить вводить больше символов, просто добавьте их в регулярное выражение, которое действует как основной фильтр символов.
• Чтобы реализовать простые контекстные ограничения, посмотрите на текущее содержимое (состояние) поля ввода (oToCheckField.value)

Некоторые вещи, которые могут вас заинтересовать:

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

Упущения

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

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

Спасибо за сообщение Dave Aaron Smith

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

 $(".numeric").keypress(function(event) { // Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet // We don't support the del key in Opera because del == . == 46. var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190]; // IE doesn't support indexOf var isControlKey = controlKeys.join(",").match(new RegExp(event.which)); // Some browsers just don't raise events for control keys. Easy. // eg Safari backspace. if (!event.which || // Control keys in most browsers. eg Firefox tab is 0 (49 <= event.which && event.which <= 57) || // Always 1 through 9 (96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section (48 == event.which && $(this).attr("value")) || // No 0 first digit (96 == event.which && $(this).attr("value")) || // No 0 first digit from number section isControlKey) { // Opera assigns values for control keys. return; } else { event.preventDefault(); } }); 

  window.jQuery.fn.ForceNumericOnly = function () { return this.each(function () { $(this).keydown(function (event) { // Allow: backspace, delete, tab, escape, and enter if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || // Allow: Ctrl+A (event.keyCode == 65 && event.ctrlKey === true) || // Allow: home, end, left, right (event.keyCode >= 35 && event.keyCode <= 39)) { // let it happen, don't do anything return; } else { // Ensure that it is a number and stop the keypress if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) { event.preventDefault(); } } }); }); }; 

И примените это на всех входах, которые вы хотите:

 $('selector').ForceNumericOnly(); 

HTML5 поддерживает номер типа ввода с поддержкой глобального браузера 88% + согласно CanIUse по состоянию на октябрь 2015 года.

Это не решение JQuery, но преимущество в том, что на мобильных телефонах клавиатура Android будет оптимизирована для ввода чисел.

В качестве альтернативы можно использовать текст типа ввода с новым параметром «шаблон». Подробнее в спецификации HTML5.

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

JSFiddle: https://jsfiddle.net/p1ue8qxj/

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

 $field.keyup(function(){ var val = $j(this).val(); if(isNaN(val)){ val = val.replace(/[^0-9\.]/g,''); if(val.split('.').length>2) val =val.replace(/\.+$/,""); } $j(this).val(val); }); 

• показать визуальную обратную связь (перед исчезновением появляется неправильная буква)
• позволяет десятичные знаки
• улавливает несколько “.”
• не имеет проблем с левым / правым и т. д.

/ * Это моя кросс-браузерная версия Как разрешить только числовые (0-9) в поле ввода HTML с помощью jQuery?
* /

 $("#inputPrice").keydown(function(e){ var keyPressed; if (!e) var e = window.event; if (e.keyCode) keyPressed = e.keyCode; else if (e.which) keyPressed = e.which; var hasDecimalPoint = (($(this).val().split('.').length-1)>0); if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 || // Allow: Ctrl+A (keyPressed == 65 && e.ctrlKey === true) || // Allow: home, end, left, right (keyPressed >= 35 && keyPressed <= 39)) { // let it happen, don't do anything return; } else { // Ensure that it is a number and stop the keypress if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) { e.preventDefault(); } } }); 

Вы можете использовать autoNumeric из decorplanit.com . Они имеют хорошую поддержку для числовых, а также валюты, округления и т. Д.

Я использовал в среде IE6, с несколькими настройками css, и это был разумный успех.

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

адаптировано с сайта autoNumeric:

 $('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible! 

Я думаю, что это хороший способ решить эту проблему, и это очень просто:

 $(function() { var pastValue, pastSelectionStart, pastSelectionEnd; $("input").on("keydown", function() { pastValue = this.value; pastSelectionStart = this.selectionStart; pastSelectionEnd = this.selectionEnd; }).on("input propertychange", function() { var regex = /^[0-9]+\.?[0-9]*$/; if (this.value.length > 0 && !regex.test(this.value)) { this.value = pastValue; this.selectionStart = pastSelectionStart; this.selectionEnd = pastSelectionEnd; } }); }); 

Пример: JSFiddle

Сценарии

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

1. Разрешает только 1 десятичную точку.
2. Позволяет arrow клавиши « home , « end и « arrow .
3. Позволяет delete и использовать backspace для любого индекса.
4. Позволяет редактировать любой индекс (если вход соответствует регулярному выражению).
5. Позволяет ctrl + v и shift + insert для действительного ввода (то же самое с правым кликом + вставить).
6. Не мерцает текстовое значение, потому что событие keyup не используется.
7. Восстанавливает выбор после недопустимого ввода.

Сценарии не удались

• Начиная с 0.5 и удаления только нуля, не будет работать. Это можно исправить, изменив регулярное выражение на /^[ /^[0-9]*\.?[0-9]*$/ а затем добавив событие размытия, чтобы добавить 0 когда текстовое поле начинается с десятичной точки (при желании) , См. Этот расширенный сценарий, чтобы лучше понять, как это исправить.

Plugin

Я создал этот простой плагин jquery, чтобы сделать это проще:

 $("input").limitRegex(/^[0-9]+\.?[0-9]*$/); 

Лучшим способом является проверка разрешений текстового поля, когда он теряет фокус.

Вы можете проверить, является ли содержимое «числом», используя регулярное выражение.

Или вы можете использовать плагин Validation, который в основном делает это автоматически.

Проверьте этот код поиска для использования базы данных:

 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); >>>>} } } //Then use the even handler onkeyup='numonly(this)' 

Просто запустите содержимое через parseFloat (). Он вернет NaN на недопустимый вход.

Это fragment, который я только что сделал (используя часть кода Питера Мортенсена / Keith Bentrup) для проверки целочисленного процента в текстовом поле (требуется jQuery):

 /* This validates that the value of the text box corresponds * to a percentage expressed as an integer between 1 and 100, * otherwise adjust the text box value for this condition is met. */ $("[id*='percent_textfield']").keyup(function(e){ if (!isNaN(parseInt(this.value,10))) { this.value = parseInt(this.value); } else { this.value = 0; } this.value = this.value.replace(/[^0-9]/g, ''); if (parseInt(this.value,10) > 100) { this.value = 100; return; } }); 

Этот код:

• Позволяет использовать основные цифровые клавиши и цифровую клавиатуру.
• Проверяет, чтобы исключить Shift-числовые символы (например, #, $,% и т. Д.).
• Заменяет значения NaN на 0
• Заменяет на 100 значений выше 100

Надеюсь, это поможет нуждающимся.

Нашел отличное решение здесь http://ajax911.com/numbers-numeric-field-jquery/

Я просто изменил «keyup» на «keydown» согласно моему требованию

Если вы используете HTML5, вам не нужно делать какие-либо большие шаги для выполнения проверки. Просто используйте –

Атрибут step позволяет использовать десятичную точку.

Другой способ сохранить позицию каретки на входе:

 $(document).ready(function() { $('.numbersOnly').on('input', function() { var position = this.selectionStart - 1; fixed = this.value.replace(/[^0-9\.]/g, ''); //remove all but number and . if(fixed.charAt(0) === '.') //can't start with . fixed = fixed.slice(1); var pos = fixed.indexOf(".") + 1; if(pos >= 0) fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', ''); //avoid more than one . if (this.value !== fixed) { this.value = fixed; this.selectionStart = position; this.selectionEnd = position; } }); }); 

Преимущества:

1. Пользователь может использовать клавиши со стрелками, Backspace, Delete, …
2. Работает, когда вы хотите вставить числа

Plunker: демонстрационная работа

Я просто нашел еще лучший плагин. Дает вам гораздо больше контроля. Скажем, у вас есть поле DOB, в котором вам нужно быть числовым, но также принимает символы «/» или «-».

Он отлично работает!

Проверьте это на http://itgroup.com.ph/alphanumeric/ .

  $(".numeric").keypress(function(event) { // Backspace, tab, enter, end, home, left, right // We don't support the del key in Opera because del == . == 46. var controlKeys = [8, 9, 13, 35, 36, 37, 39]; // IE doesn't support indexOf var isControlKey = controlKeys.join(",").match(new RegExp(event.which)); // Some browsers just don't raise events for control keys. Easy. // eg Safari backspace. if (!event.which || // Control keys in most browsers. eg Firefox tab is 0 (49 <= event.which && event.which <= 57) || // Always 1 through 9 (48 == event.which && $(this).attr("value")) || // No 0 first digit isControlKey) { // Opera assigns values for control keys. return; } else { event.preventDefault(); } }); 

Этот код работал очень хорошо, я просто должен был добавить 46 в массив controlKeys, чтобы использовать этот период, хотя я не думаю, что это лучший способ сделать это;)

Я использовал это, с хорошими результатами.

 ini=$("#id").val(); a=0; $("#id").keyup(function(e){ var charcode = (e.which) ? e.which : e.keyCode; // for decimal point if(!(charcode===190 || charcode===110)) { // for numeric keys andcontrol keys if (!((charcode>=33 && charcode<=57) || // for numpad numeric keys (charcode>=96 && charcode<=105) // for backspace || charcode==8)) { alert("Sorry! Only numeric values allowed."); $("#id").val(ini); } // to include decimal point if first one has been deleted. if(charcode===8) { ini=ini.split("").reverse(); if(ini[0]==".") a=0; } } else { if(a==1) { alert("Sorry! Second decimal point not allowed."); $("#id").val(ini); } a=1; } ini=$("#id").val(); }); find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes 

Это очень просто, что у нас уже есть встроенная функция javascript «isNaN».

 $("#numeric").keydown(function(e){ if (isNaN(String.fromCharCode(e.which))){ return false; } });