Проверка входного номера-ограничить ввод только чисел или цифр, int & float оба

Как ограничить поле ввода, чтобы ввести только числа / цифры int и float оба. Иногда нам нужно разрешить как целое, так и плавающее значение для таких полей, как amount, поэтому в этом случае требуется проверка. Нет доступных решений, но они имеют большой размер кода. Поэтому нужен короткий, но эффективный код.

<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />
8
floating-point javascript jquery numbers validation

6 ответов

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

он также принимает допустимые значения 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 />

обновление

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

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

$(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 />
16

однострочное Решение #1:

использовать <input type="number"> С .

<input type="number" step="0.0001"> // The user can enter up to 4 decimal places.

<input type="number" step="any"> // Not supported in all browsers, but permits numbers of any decimal precision.

вы также можете использовать min и/или max атрибуты для установки минимального и/или максимального значения.

однострочное решение #2:

используйте обычный текст input элемент с регулярным выражением .

<input type="text" pattern="^-?([0-9]*\.?[0-9]+|[0-9]+\.?[0-9]*)$">

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

9

вы можете добавить pattern атрибут поля ввода. Если входное значение не соответствует шаблону, вы можете создать стиль поля ввода и / или показать сообщение об ошибке с помощью селектора css :invalid:

.error-msg {
  display: none; /* Hide by default */
}
.number-only:invalid {
  background: pink;
}
.number-only:invalid + .error-msg {
  display: inline;
}
<input type='tel' class='number-only' pattern='[+\-]?\d*\.?\d+' />

<span class='error-msg'>Please enter a valid integer or float value.</span>

некоторые замечания:

  • type='tel' заставляет мобильные браузеры открывать цифровую клавиатуру, но, конечно, вы также можете установить тип text.
  • поддержка браузера для pattern входного атрибута : http://caniuse.com/#feat=input-pattern
  • поддержка браузера для :invalid селектор css:http://caniuse.com/#feat=form-validation
  • регулярное выражение шаблона не поддерживает экспоненциальную нотацию, например 1.23e4.
  • регулярное выражение шаблона не допускает пробелов – они недопустимы в нотации int и float, но разрешение их может улучшить пользовательский интерфейс.
3

вызовите одну функцию jquery в onkeypress текстового поля. В этой функции используйте соответствующий код ascii для ограничения ввода.

1

пользователь не может ввести десятичное значение в JS. Попробуйте использовать этот код :

if(document.getElementById(id).value.indexOf('.') != -1){
    print "do not Enter decimal nuber";
}
-5