Я создаю веб-страницу, где у меня есть текстовое поле ввода, в котором я хочу разрешить только числовые символы, такие как (0,1,2,3,4,5...9) 0-9.
Как я могу сделать это с помощью jQuery?
Примечание: Это обновленный ответ. Комментарии ниже относятся к старой версии, которая возилась с ключевыми кодами.
Попробуйте сами [на JSFiddle][1]..
В jQuery нет собственной реализации для этого, но вы можете фильтровать входные значения текста <input>
с помощью следующего плагина inputFilter
(поддерживает Copy+Paste, Drag+Drop, сочетания клавиш, операции контекстного меню, ненабираемые клавиши, положение каретки, различные раскладки клавиатуры и все браузеры, начиная с IE 9):
// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
$.fn.inputFilter = function(inputFilter) {
return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
}
});
};
}(jQuery));
Теперь вы можете использовать плагин inputFilter
для установки фильтра ввода:
$(document).ready(function() {
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value); // Allow digits only, using a RegExp
});
});
Вот еще несколько примеров входных фильтров, которые могут быть полезны:
return /^-?\d*$/.test(value); // Integer
return /^\d*$/.test(value); // Integer >= 0
return /^\d*$/.test(value) && // Integer >= 0 and <= 500
(value === "" || parseInt(value) <= 500);
return /^-?\d*[.,]?\d*$/.test(value); // Float (accept both '.' and ',' as decimal separator)
return /^-?\d*[.,]?\d{0,2}$/.test(value); // Currency (i.e. at most two decimal places)
return /^[a-z]*$/i.test(value); // A-Z only
return /^[0-9a-f]*$/i.test(value); // Hexadecimal
* Обратите внимание, что вы все еще должны* выполнять валидацию на стороне сервера!
jQuery на самом деле не нужен для этого, вы можете сделать то же самое и на чистом JavaScript. Смотрите этот ответ или попробуйте сами [на JSFiddle][4].
HTML 5 имеет встроенное решение с <input type="число">
(см. спецификацию), но учтите, что поддержка браузеров различна:
step
, min
и max
.e
и E
. Также смотрите этот вопрос.Попробуйте сами на сайте w3schools.com.
Вот функцию я использую:
// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
return this.each(function()
{
$(this).keydown(function(e)
{
var key = e.charCode || e.keyCode || 0;
// allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
// home, end, period, and numpad decimal
return (
key == 8 ||
key == 9 ||
key == 13 ||
key == 46 ||
key == 110 ||
key == 190 ||
(key >= 35 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
});
});
};
Затем вы можете прикрепить его к вашему управления:
$("#yourTextBoxName").ForceNumericOnly();
Инлайн:
в
<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">
в
Ненавязчивый стиль (с jQuery):
в
$('input[name="number"]').keyup(function(e)
{
if (/\D/g.test(this.value))
{
// Filter non-digits from input value.
this.value = this.value.replace(/\D/g, '');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">
в
Вы могли бы просто использовать простой JavaScript регулярное выражение для проверки чисто числовые символы:
/^[0-9]+$/.test(input);
Это возвращает true, если входной сигнал является числовым или false, если нет.
или для кода события, просто использовать ниже :
// Allow: backspace, delete, tab, escape, enter, ctrl+A and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
var charValue = String.fromCharCode(e.keyCode)
, valid = /^[0-9]+$/.test(charValue);
if (!valid) {
e.preventDefault();
}
Вы можете использовать на входное событие вроде этого:
$(document).on("input", ".numeric", function() {
this.value = this.value.replace(/\D/g,'');
});
Но, что's этот код привилегия?
Коротким и сладким - даже если этого никогда не привлекали к себе особого внимания после 30+ ответы ;)
$('#number_only').bind('keyup paste', function(){
this.value = this.value.replace(/[^0-9]/g, '');
});
Использовать функцию JavaScript isNaN,
if (isNaN($('#inputid').val()))
<удар> если (isNaN(документ.метода getElementById('inputid').функция val())) </удара>
if (isNaN(document.getElementById('inputid').value))
Обновление: И вот хорошая статья про это, но с помощью jQuery: ограничение ввода в HTML текстовое поле для числовых значений
Я использую это в файл наши внутренние общими JS. Я просто добавить класс к любому из входов, который нуждается в такого поведения.
$(".numericOnly").keypress(function (e) {
if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
$(document).ready(function() {
$("#txtboxToFilter").keydown(function(event) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 ) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});
});
Источник: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values
Проще один для меня
jQuery('.plan_eff').keyup(function () {
this.value = this.value.replace(/[^1-9\.]/g,'');
});
Почему так сложно? Вы Don'т даже нужно в jQuery, потому что есть атрибут шаблон на HTML5:
<input type="text" pattern="[0-9]*">
Здорово то, что она воспитывает цифровой клавиатуры на мобильных устройствах, который намного лучше, чем с помощью jQuery.
То же самое можно делать с помощью этого очень простого решения
в
$("input.numbers").keypress(function(event) {
return /\d/.test(String.fromCharCode(event.keyCode));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />
в
Я сослался на этой ссылке для решения. Он отлично работает!!!
Атрибут шаблон в HTML5 определяет регулярное выражение, что в <ввод> элемент's стоимостью проверяется.
<input type="text" pattern="[0-9]{1,3}" value="" />
Примечание: атрибут шаблон работает со следующими типами входных данных: текст, поиск, URL-адрес, тел., адрес электронной почты и пароль.
[0-9] может быть заменен любым очередное условие выражения.
{1,3} представляет минимум 1 и максимум 3 цифры могут быть введены.
Что-то довольно простое, используя библиотеку jQuery.проверки
$(document).ready(function() {
$("#formID").validate({
rules: {
field_name: {
numericOnly:true
}
}
});
});
$.validator.addMethod('numericOnly', function (value) {
return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');
Вы можете использовать эту функцию JavaScript:
function maskInput(e) {
//check if we have "e" or "window.event" and use them as "event"
//Firefox doesn't have window.event
var event = e || window.event
var key_code = event.keyCode;
var oElement = e ? e.target : window.event.srcElement;
if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
if ((key_code > 47 && key_code < 58) ||
(key_code > 95 && key_code < 106)) {
if (key_code > 95)
key_code -= (95-47);
oElement.value = oElement.value;
} else if(key_code == 8) {
oElement.value = oElement.value;
} else if(key_code != 9) {
event.returnValue = false;
}
}
}
И вы можете привязать ее к вашему текстовому полю следующим образом:
$(document).ready(function() {
$('#myTextbox').keydown(maskInput);
});
Я использую вышеприведенный вариант в продакшене, и он отлично работает, и он кроссбраузерный. Более того, он не зависит от jQuery, поэтому вы можете привязать его к вашему textbox с помощью встроенного JavaScript:
<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>
Я приехал в очень хорошее и простое решение, которое не'т запретить пользователю выделение текста или копировать вставить, как и другие решения. стиле с jQuery :)
$("input.inputPhone").keyup(function() {
var jThis=$(this);
var notNumber=new RegExp("[^0-9]","g");
var val=jThis.val();
//Math before replacing to prevent losing keyboard selection
if(val.match(notNumber))
{ jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server
suppressNonNumericInput функция(событие){
if( !(event.keyCode == 8 // backspace
|| event.keyCode == 46 // delete
|| (event.keyCode >= 35 && event.keyCode <= 40) // arrow keys/home/end
|| (event.keyCode >= 48 && event.keyCode <= 57) // numbers on keyboard
|| (event.keyCode >= 96 && event.keyCode <= 105)) // number on keypad
) {
event.preventDefault(); // Prevent character input
}
}
Вот быстрое решение, я создал некоторое время назад. вы можете прочитать больше об этом в моей статье:
http://ajax911.com/numbers-numeric-field-jquery/
$("#textfield").bind("keyup paste", function(){
setTimeout(jQuery.proxy(function() {
this.val(this.val().replace(/[^0-9]/g, ''));
}, $(this)), 0);
});