jQuery: каков наилучший способ ограничить «числовой» ввод только для текстовых полей? (разрешить десятичные точки) - PullRequest
Новая
       57

jQuery: каков наилучший способ ограничить «числовой» ввод только для текстовых полей? (разрешить десятичные точки)

225 голосов
/ 21 мая 2009

Каков наилучший способ ограничить ввод «только для чисел» для текстовых полей?

Я ищу что-то, что допускает десятичные точки.

Я вижу много примеров. Но еще предстоит решить, какой из них использовать.

Обновление от Правина Джеганатана

Плагинов больше нет, jQuery реализовал собственный jQuery.isNumeric(), добавленный в v1.7. Смотри: https://stackoverflow.com/a/20186188/66767

Ответы [ 40 ]

285 голосов
/ 21 мая 2009

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

<input type="text" class="numbersOnly" value="" />

И 

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

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

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

192 голосов
/ 21 мая 2009

Обновление

Для этого есть новое и очень простое решение:

Позволяет использовать любой тип входного фильтра для текста <input>, в том числе различные числовые фильтры. Это будет правильно обрабатывать Копировать + Вставить, Drag + Drop, сочетания клавиш, операции с контекстным меню, несимметричные клавиши и все раскладки клавиатуры.

См. этот ответ или попробуйте сами на JSFiddle .

плагин jquery.numeric

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

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

Кроме того, это работает и с текстовыми областями!

Однако обратите внимание, что Ctrl + A, Copy + Paste (через контекстное меню) и Drag + Drop будут не работать должным образом.

HTML 5

Благодаря более широкой поддержке стандарта HTML 5 мы можем использовать атрибут pattern и тип number для элементов input, чтобы ограничить ввод только цифрами. В некоторых браузерах (в частности, в Google Chrome) он также позволяет ограничивать вставку нечислового содержимого. Более подробная информация о number и других более новых типах ввода доступна здесь .

100 голосов
/ 09 августа 2012

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

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, '');
    }
});

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

54 голосов
/ 10 февраля 2010

Плагин 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();
  }
});
47 голосов
/ 25 ноября 2013

Больше никаких плагинов, 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);
   }
});
33 голосов
/ 10 сентября 2013

Упомянутый выше плагин 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]/));
}

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

25 голосов
/ 21 мая 2009

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

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
    }
  }
});
17 голосов
/ 17 мая 2015

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

Он также принимает действительные значения типа 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();
  }
}
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

Подход jQuery 

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

UPDATE

Приведенные выше ответы приведены для наиболее распространенного варианта использования - проверка ввода в виде числа.

Но ниже приведен фрагмент кода для особых случаев использования

  • Допустимые отрицательные числа
  • Отображение недопустимого нажатия клавиши перед его удалением. 

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />
14 голосов
/ 26 октября 2012

Ниже приводится то, что я использую, чтобы буквально блокировать нажатия клавиш. Это позволяет только цифры 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)">
11 голосов
/ 01 августа 2012

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

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true,
      digits: true,
      range : [0, 50]
    }
  }
});
Страница:
...