Каков наилучший способ ограничить "число" - только вход для текстовых полей?
Я ищу что-то, что позволяет десятичные точки.
Я вижу много примеров. Но еще не решить, какой из них использовать.
Обновление от Правэна Джеганатана
Больше нет плагинов, jQuery внедрил свой собственный jQuery.isNumeric(), добавленный в v1.7. См.: qaru.site/info/11856/...
Для этого есть новое и очень простое решение:
Он позволяет использовать любой тип входного фильтра для текстового
<input>, включая различные числовые фильтры. Это будет правильно обрабатывать Copy + Paste, Drag + Drop, сочетания клавиш, операции с контекстным меню, неиспользуемые клавиши и все раскладки клавиатуры.
Посмотрите этот ответ или попробуйте сами на JSFiddle.
Я успешно реализовал много форм с помощью плагина jquery.numeric.
$(document).ready(function(){
$(".numeric").numeric();
});
Кроме того, это работает и с textareas!
Однако обратите внимание, что Ctrl + A, Copy + Paste (через контекстное меню) и Drag + Drop не будут работать должным образом.
Благодаря более широкой поддержке стандарта HTML 5 мы можем использовать атрибут pattern и тип number для элементов input чтобы ограничить ввод только цифрами. В некоторых браузерах (в частности, в Google Chrome) он также позволяет ограничивать вставку нечислового содержимого. Более подробная информация о number и других новых типах ввода доступна здесь.
Если вы хотите ограничить ввод (в отличие от проверки), вы можете работать с ключевыми событиями. что-то вроде этого:
<input type="text" class="numbersOnly" value="" />
и
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.
// e.g. Safari backspace.
if (!event.which || // Control keys in most browsers. e.g. 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]/));
}
Конечно, это только для чистого числового ввода (плюс backspace, delete, forward/back keys), но его можно легко изменить, включив в него символы и минус.
Вы можете использовать плагин Validation с number().
$("#myform").validate({
rules: {
field: {
required: true,
number: true
}
}
});
Нет необходимости в длинном коде для ограничения ввода номера, просто попробуйте этот код.
Он также принимает действительные значения int и float для обоих значений.
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();
}
}<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />Ниже я использую, чтобы буквально блокировать нажатия клавиш. Это позволяет только числа 0-9 и десятичную точку. Легко реализовать, не много кода, и работает как шарм:
<script>
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
} else {
return true;
}
}
</script>
<input value="" onkeypress="return isNumberKey(event)">
В качестве небольшого улучшения к этому предложению вы можете использовать Validation plugin с его number(), digits, и range. Например, следующее гарантирует, что вы получите положительное целое число от 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, но я не был доволен нежелательными символами (без цифр), которые действительно появляются в поле ввода перед удалением на клавиатуре.
В поисках других решений я нашел это:
<script>
function numbersOnly(oToCheckField, oKeyEvent) {
return oKeyEvent.charCode === 0 ||
/\d/.test(String.fromCharCode(oKeyEvent.charCode));
}
</script>
<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput"
onkeypress="return numbersOnly(this, event);"
onpaste="return false;" /></p>
</form>
Источник: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example Пример: http://jsfiddle.net/u8sZq/
Чтобы разрешить одну десятичную точку, вы можете сделать что-то вроде этого:
<script>
function numbersOnly(oToCheckField, oKeyEvent) {
var s = String.fromCharCode(oKeyEvent.charCode);
var containsDecimalPoint = /\./.test(oToCheckField.value);
return oKeyEvent.charCode === 0 || /\d/.test(s) ||
/\./.test(s) && !containsDecimalPoint;
}
</script>
Источник: просто написал это. Кажется, работает. Пример: http://jsfiddle.net/tjBsF/
Некоторые вещи, которые могут вас заинтересовать:
Я знаю, что название запрашивает решения 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.
// e.g. Safari backspace.
if (!event.which || // Control keys in most browsers. e.g. 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 года.
<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />
Это не решение 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, и это был разумный успех.
Например, может быть определен класс css numericInput, и его можно использовать для украшения ваших полей с помощью числовых масок ввода.
адаптирован с сайта 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
Сценарии, охватываемые
Большинство подобных рекомендаций здесь не имеют хотя бы одного из них или требуют большого количества кода для покрытия всех этих сценариев.
home, end и arrow.delete и backspace для любого индекса.keyup не используется.Сценарии не удалось
0.5 и удаления только нуля не будет работать. Это можно устранить, изменив регулярное выражение на /^[0-9]*\.?[0-9]*$/, а затем добавив событие размытия, чтобы добавить 0, когда текстовое поле начинается с десятичной точки (при желании). См. Этот расширенный сценарий, чтобы лучше понять, как это исправить.Plugin
Я создал этот простой jquery plugin, чтобы сделать это проще:
$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);
Лучшим способом является проверка разрешений текстового поля, когда он теряет фокус.
Вы можете проверить, является ли содержимое "числом", используя регулярное выражение.
Или вы можете использовать плагин Validation, который в основном делает это автоматически.
Просто запустите содержимое через parseFloat(). Он вернет NaN неверный ввод.
Проверьте этот код поиска для использования базы данных:
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)'
Это фрагмент, который я только что сделал (используя часть кода Питера Мортенсена /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;
}
});
Этот код:
Я надеюсь, что это поможет нуждающимся.
Нашел отличное решение здесь http://ajax911.com/numbers-numeric-field-jquery/
Я просто изменил "keyup" на "keydown" согласно моему требованию
Если вы используете HTML5, вам не нужно идти на какие-либо большие длины для выполнения проверки. Просто используйте -
<input type="number" step="any" />
Атрибут 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;
}
});
});
Преимущества:
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.
// e.g. Safari backspace.
if (!event.which || // Control keys in most browsers. e.g. 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;
}
});