Я создаю веб-страницу, где у меня есть поле ввода текста, в котором я хочу разрешить только числовые символы, такие как (0,1,2,3,4,5 ... 9) 0-9.
Как я могу сделать это с помощью jQuery?
Я создаю веб-страницу, где у меня есть поле ввода текста, в котором я хочу разрешить только числовые символы, такие как (0,1,2,3,4,5 ... 9) 0-9.
Как я могу сделать это с помощью jQuery?
Ответы:
Примечание. Это обновленный ответ. Комментарии ниже относятся к старой версии, которая путалась с кодами клавиш.
Попробуйте сами на JSFiddle .
Для этого нет собственной реализации jQuery, но вы можете отфильтровать входные значения текста <input>
с помощью следующего inputFilter
плагина (поддерживает Копирование + Вставка, Перетаскивание + Отбрасывание, сочетания клавиш, операции с контекстным меню, неиспользуемые клавиши, положение каретки, другое раскладки клавиатуры и все браузеры начиная с IE 9 ):
// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
$.fn.inputFilter = function(inputFilter) {
return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
} else {
this.value = "";
}
});
};
}(jQuery));
Теперь вы можете использовать inputFilter
плагин для установки входного фильтра:
$(document).ready(function() {
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value); // Allow digits only, using a RegExp
});
});
Посмотрите демонстрацию JSFiddle для большего количества примеров входного фильтра. Также обратите внимание, что вы все равно должны выполнить проверку на стороне сервера!
JQuery на самом деле не нужен для этого, вы можете сделать то же самое с чистым JavaScript. Смотрите этот ответ .
HTML 5 имеет собственное решение с <input type="number">
(см. Спецификацию ), но обратите внимание, что поддержка браузера варьируется:
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();
return this.each(function()
?
each
от return this.each(function()
должен разрешить несколько объектов, как сказал HaggleLad, а return
часть должна вернуть объект jQuery обратно вызывающей стороне, чтобы разрешить цепочки, такие как$("input[type='text'").ForceNumericOnly().show()
В линию:
<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">
onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')"
.
/[^0-9]|^0+(?!$)/g
предотвратить ведущие серии ноль.
Вы можете просто использовать простое регулярное выражение JavaScript для проверки чисто числовых символов:
/^[0-9]+$/.test(input);
Это возвращает истину, если ввод числовой или ложь, если нет.
или для кода события, просто используйте ниже:
// Allow: backspace, delete, tab, escape, enter, ctrl+A and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
var charValue = String.fromCharCode(e.keyCode)
, valid = /^[0-9]+$/.test(charValue);
if (!valid) {
e.preventDefault();
}
Вы можете использовать на входном событии, как это:
$(document).on("input", ".numeric", function() {
this.value = this.value.replace(/\D/g,'');
});
Но что это за кодовая привилегия?
decimal
промежуточным 0.0
до 24.0
я не могу позволить ему войти в.
this.value = Number(this.value.replace(/\D/g, ''));
Коротко и мило - даже если это никогда не привлечет большого внимания после 30+ ответов;)
$('#number_only').bind('keyup paste', function(){
this.value = this.value.replace(/[^0-9]/g, '');
});
Используйте функцию JavaScript isNaN ,
if (isNaN($('#inputid').val()))
if (isNaN (document.getElementById ('inputid'). val ()))
if (isNaN(document.getElementById('inputid').value))
Обновление: и здесь хорошая статья, рассказывающая об этом, но использующая jQuery: ограничение ввода в текстовых полях HTML числовыми значениями
document.getElementById('inputid').val()
чувак .. это все еще JQuery. .val()
это вещь JQuery. использование.value
decimal
промежуточным 0.0
до 24.0
я не могу позволить ему войти в.
$(document).ready(function() {
$("#txtboxToFilter").keydown(function(event) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 ) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});
});
Источник: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values
Я использую это в нашем внутреннем общем файле JS. Я просто добавляю класс к любому входу, который нуждается в таком поведении.
$(".numericOnly").keypress(function (e) {
if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
Проще для меня это
jQuery('.plan_eff').keyup(function () {
this.value = this.value.replace(/[^1-9\.]/g,'');
});
this.value.replace(/[^0-9\.]/g,'');
чтобы включить требования OP 0-9
Почему так сложно? Вам даже не нужен 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" />
Я ссылался на эту ссылку для решения. Работает отлично !!!
decimal
промежуточным 0.0
до 24.0
я не могу позволить ему войти в.
Атрибут pattern в HTML5 определяет регулярное выражение, по которому проверяется значение элемента.
<input type="text" pattern="[0-9]{1,3}" value="" />
Примечание. Атрибут pattern работает со следующими типами ввода: текст, поиск, URL, телефон, электронная почта и пароль.
[0-9] можно заменить любым условием регулярного выражения.
{1,3} представляет минимум 1 и максимум 3 цифры.
decimal
промежуточным 0.0
до 24.0
я не могу позволить ему войти в.
Что-то довольно простое, используя jQuery.validate
$(document).ready(function() {
$("#formID").validate({
rules: {
field_name: {
numericOnly:true
}
}
});
});
$.validator.addMethod('numericOnly', function (value) {
return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');
function suppressNonNumericInput (event) {
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
}
}
decimal
промежуточным 0.0
до 24.0
я не могу позволить ему войти в.
Я пришел к очень хорошему и простому решению, которое не мешает пользователю выбирать текст или вставлять копии, как это делают другие решения. JQuery стиль :)
$("input.inputPhone").keyup(function() {
var jThis=$(this);
var notNumber=new RegExp("[^0-9]","g");
var val=jThis.val();
//Math before replacing to prevent losing keyboard selection
if(val.match(notNumber))
{ jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server
Вы можете использовать эту функцию JavaScript:
function maskInput(e) {
//check if we have "e" or "window.event" and use them as "event"
//Firefox doesn't have window.event
var event = e || window.event
var key_code = event.keyCode;
var oElement = e ? e.target : window.event.srcElement;
if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
if ((key_code > 47 && key_code < 58) ||
(key_code > 95 && key_code < 106)) {
if (key_code > 95)
key_code -= (95-47);
oElement.value = oElement.value;
} else if(key_code == 8) {
oElement.value = oElement.value;
} else if(key_code != 9) {
event.returnValue = false;
}
}
}
И вы можете привязать его к вашему текстовому полю следующим образом:
$(document).ready(function() {
$('#myTextbox').keydown(maskInput);
});
Я использую выше в производстве, и он отлично работает, и это кросс-браузер. Кроме того, он не зависит от jQuery, поэтому вы можете привязать его к текстовому полю с помощью встроенного JavaScript:
<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>
Я думаю, что это поможет всем
$('input.valid-number').bind('keypress', function(e) {
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
})
if(event.which!=8 && event.which!=0 && (event.which<48 || event.which>57) && (event.which<96 || event.which>105)) return;
Я написал свой, основываясь на посте @ user261922, немного измененном, чтобы вы могли выбрать все, вкладку и обрабатывать несколько полей «только для чисел» на одной странице.
var prevKey = -1, prevControl = '';
$(document).ready(function () {
$(".OnlyNumbers").keydown(function (event) {
if (!(event.keyCode == 8 // backspace
|| event.keyCode == 9 // tab
|| event.keyCode == 17 // ctrl
|| event.keyCode == 46 // delete
|| (event.keyCode >= 35 && event.keyCode <= 40) // arrow keys/home/end
|| (event.keyCode >= 48 && event.keyCode <= 57) // numbers on keyboard
|| (event.keyCode >= 96 && event.keyCode <= 105) // number on keypad
|| (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id)) // ctrl + a, on same control
) {
event.preventDefault(); // Prevent character input
}
else {
prevKey = event.keyCode;
prevControl = event.currentTarget.id;
}
});
});
Вот быстрое решение, которое я создал некоторое время назад. Вы можете прочитать больше об этом в моей статье:
http://ajax911.com/numbers-numeric-field-jquery/
$("#textfield").bind("keyup paste", function(){
setTimeout(jQuery.proxy(function() {
this.val(this.val().replace(/[^0-9]/g, ''));
}, $(this)), 0);
});
Вы хотели бы разрешить вкладку:
$("#txtboxToFilter").keydown(function(event) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
Вот ответ, который использует фабрику jQuery UI Widget. Вы можете настроить, какие символы разрешены легко.
$('input').numberOnly({
valid: "0123456789+-.$,"
});
Это позволило бы цифры, знаки числа и суммы в долларах.
$.widget('themex.numberOnly', {
options: {
valid : "0123456789",
allow : [46,8,9,27,13,35,39],
ctrl : [65],
alt : [],
extra : []
},
_create: function() {
var self = this;
self.element.keypress(function(event){
if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
{
return;
}
if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
{
return;
}
if(event.altKey && self._codeInArray(event,self.options.alt))
{
return;
}
if(!event.shiftKey && !event.altKey && !event.ctrlKey)
{
if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
{
return;
}
}
event.preventDefault();
});
},
_codeInArray : function(event,codes) {
for(code in codes)
{
if(event.keyCode == codes[code])
{
return true;
}
}
return false;
}
});
Это кажется неразрушимым.
// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
this.value = this.value.replace(/[^0-9\.]+/g, '');
if (this.value < 1) this.value = 0;
});
// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});
Необходимо убедиться, что у вас есть цифровая клавиатура и клавиша табуляции тоже работает
// Allow only backspace and delete
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {
}
else {
event.preventDefault();
}
}
Я хотел немного помочь, и я сделал свою версию, onlyNumbers
функцию ...
function onlyNumbers(e){
var keynum;
var keychar;
if(window.event){ //IE
keynum = e.keyCode;
}
if(e.which){ //Netscape/Firefox/Opera
keynum = e.which;
}
if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
(event.keyCode >= 96 && event.keyCode <= 105)))return true;
if(keynum == 110 || keynum == 190){
var checkdot=document.getElementById('price').value;
var i=0;
for(i=0;i<checkdot.length;i++){
if(checkdot[i]=='.')return false;
}
if(checkdot.length==0)document.getElementById('price').value='0';
return true;
}
keychar = String.fromCharCode(keynum);
return !isNaN(keychar);
}
Просто добавьте в тег ввода "... input ... id =" price "onkeydown =" return onlyNumbers (event) "..." и все готово;)
Я тоже хотел бы ответить :)
$('.justNum').keydown(function(event){
var kc, num, rt = false;
kc = event.keyCode;
if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
return rt;
})
.bind('blur', function(){
num = parseInt($(this).val());
num = isNaN(num) ? '' : num;
if(num && num < 0) num = num*-1;
$(this).val(num);
});
Вот и все ... только цифры. :) Почти это может работать только с «размытием», но ...
Простой способ проверить, является ли введенное значение числовым:
var checknumber = $('#textbox_id').val();
if(jQuery.isNumeric(checknumber) == false){
alert('Please enter numeric value');
$('#special_price').focus();
return;
}
Просто нужно применить этот метод в Jquery, и вы можете проверить свое текстовое поле, чтобы просто принять только номер.
function IsNumberKeyWithoutDecimal(element) {
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp);
}
Попробуйте это решение здесь
Вы можете попробовать ввести номер HTML5:
<input type="number" placeholder="enter the number" min="0" max="9">
Этот элемент тега ввода теперь будет принимать значение только от 0 до 9, поскольку атрибут min установлен в 0, а атрибут max установлен в 9.
Для получения дополнительной информации посетите http://www.w3schools.com/html/html_form_input_types.asp