Ввод текста HTML допускает только числовой ввод

Question

Есть ли быстрый способ настроить ввод текста HTML (<input type=text />), чтобы разрешить только цифровые нажатия клавиш (плюс '.')?

Answer 1

это также работает для персидского и арабского числа:)

 setNumericInput: function (event) {
          var key = window.event ? event.keyCode : event.which
          if (event.keyCode === 8 ||
        (key >= 48 && key <= 57) ||
        (key >= 1776 && key <= 1785)) {
            return true
          } else {
            event.preventDefault()
          }
        }

Answer 2

Вот очень короткое решение, которое не использует устаревшие keyCode или which, не блокирует никакие не входящие ключи и использует чистый JavaScript. (Протестировано в Chromium 70.0.3533, Firefox 62.0 и Edge 42.17134.1.0)

HTML:

<input type="text" onkeypress="validate(event)">

JS:

function validate(ev) {
    if (!ev) {
        ev = window.event;
    }

    if (!ev.ctrlKey && ev.key.length === 1 && (isNaN(+ev.key) || ev.key === " ")) {
        return ev.preventDefault();
    }
}

Answer 3

Вызывайте эту функцию, когда будете готовы проверить, что когда-либо. Я использовал текстовое поле здесь

В моем HTML:

<input type="button" value="Check IT!" onclick="check(document.getElementById('inputboxToValidate').value);" />

В моем коде JavaScript:

function check(num){
    var onlynumbers = true
    for (var i = 0; i < (num.length - 1); i++) {
        if (num.substr(i, 1) != "0" || num.substr(i, 1) != "1" || num.substr(i, 1) != "2" || num.substr(i, 1) != "3" || num.substr(i, 1) != "4" || num.substr(i, 1) != "5" || num.substr(i, 1) != "6" || num.substr(i, 1) != "7" || num.substr(i, 1) != "8" || num.substr(i, 1) != "9") {
            alert("please make sure that only numbers have been entered in the Quantaty box");
            onlynumbers = false
        }
    }
    if (onlynumbers == true) {

        //Execute Code
    }
}

Answer 4

Вы можете попробовать использовать событие '' 'onkeydown' '' и отменить событие (event.preventDefault или что-то в этом роде), когда это не один из разрешенных ключей.

Answer 5

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

function validateInput() {
   if (jQuery('#x1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null || 
       jQuery('#x2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null || 
       jQuery('#y1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
       jQuery('#y2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null) {
         alert("A number must be entered for each coordinate, even if that number is 0. Please try again.");
         location.reload();
   }
}

Answer 6

Я понимаю, старый пост, но я думал, что это может кому-то помочь. Недавно мне пришлось ограничить текстовое поле до 5 десятичных знаков. В моем случае ТАКЖЕ пользовательский ввод должен быть менее 0,1

<input type="text" value="" maxlength=7 style="width:50px" id="fmargin" class="formText"  name="textfield" onkeyup="return doCheck('#fmargin',event);">

Вот функция doCheck

function doCheck(id,evt)
{
    var temp=parseFloat($(id).val());

    if (isNaN(temp))
        temp='0.0';
    if (temp==0)
        temp='0.0';

    $(id).val(temp);
}

Здесь та же самая функция, за исключением принудительного ввода целого числа

function doCheck(id,evt)
{
    var temp=parseInt($(id).val());

    if (isNaN(temp))
        temp='0';

    $(id).val(temp);
}

надеюсь, что это поможет кому-то

Answer 7

Спасибо, ребята, это действительно помогает мне!

Я нашел идеальный вариант действительно полезным для базы данных.

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

Затем добавьте обработчик событий:

onkeyup="numonly(this);"

Answer 8

Я лично предлагаю использовать плагин autoNumeric от http://www.decorplanit.com/plugin/ - он поддерживает все различные варианты, такие как обработка префикса / суффикса, обработка валюты, форматирование отрицательного значения, минимальное, максимальное и т. Д.

Answer 9

Когда дело доходит до защиты от дурака, всегда следует стараться сохранять ориентир для «интеллекта пользователя».

Несмотря на то, что пренебрежение всем, кроме чисел, точка и дефис кажутся идеальным выбором, вам также следует подумать о том, чтобы позволить им ввести любой контент, а когда они закончат, очистить ввод; если не верный номер, показать ошибку . Этот метод гарантирует, что независимо от того, что пользователю удастся сделать, результат всегда будет действительным. Если пользователь достаточно наивен, чтобы не понимать предупреждения и сообщения об ошибках, нажатие кнопки и видение того, что ничего не происходит (как при сравнении кодов клавиш), только еще больше запутает его / ее.

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

1. При потере фокуса или отправке формы выполните следующие действия.

   1,1. Считать содержимое с ввода и применить parseFloat к результату

   1.2. Если результатом является номер недоступный (NaN), сбросьте поле ввода и откройте сообщение об ошибке : «Пожалуйста, введите правильный номер: например. 235 или -654 или 321,526 или -6352,646584 ".

   1,3. Иначе, если String (результат)! == (содержимое из ввода), измените значение поля на результат и отобразите предупреждение : «Значение, которое вы введены были изменены. Ввод должен быть действительным числом: например. 235 или -654 или 321.526 или -6352.646584 ". Для поля, которое не может допустить неподтвержденного значения, это условие может быть добавлено к шагу 1.2.

   * * 1.4 тысячу двадцать три. Иначе ничего не делать.

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

Недостатки:

1. Ввод позволяет пользователю вводить любое значение, пока фокус не будет потерян или форма не будет отправлена. Но если инструкции по заполнению поля были достаточно четкими, в 90% случаев это может не сработать.

2. Если для отображения предупреждения используется шаг 1.3, он может быть пропущен пользователем и может привести к непреднамеренной отправке ввода. Если вы сгенерируете ошибку или отобразите предупреждение правильно, это решит проблему.

3. Speed. Это может быть медленнее в микросекундах, чем метод регулярных выражений.

Преимущества: Предполагая, что пользователь имеет базовые знания для чтения и понимания,

1. Широкие возможности настройки.

2. Работает кросс-браузерно и независимо от языка.

3. Использует уже имеющиеся функции в форме для отображения ошибок и предупреждений.

Answer 10

Надеюсь, я не бью здесь мертвую лошадь уродливой палкой, но я использую это для ввода количества на моем веб-сайте, он допускает только цифры от 1 до 99.

Попробуйте: https://jsfiddle.net/83va5sb9/

      <input min="1" type="text" id="quantity" name="quantity" value="1"
      onKeyUp="numbersonly()">

      <script>
    function numbersonly() {
      var str = document.getElementById("quantity").value
      var newstr = ""
      for (i = 0; i < str.length; i++) {
        for (ii = 1; ii < 10; ii++) {
          if (str.charAt(i).indexOf(ii) > -1) {
            newstr += str.charAt(i)
          }
        }
      }
      if (newstr == "") {
        newstr = 1
      }
      if (parseInt(newstr) > 99) {
        newstr = 99
      }
      document.getElementById("quantity").value = newstr
    }

    </script>