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

Question

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

Answer 1

JavaScript

^{Примечание: Это обновленный ответ. Комментарии ниже относятся к старой версии, которая путалась с кодами клавиш.}

Функция setInputFilter из приведенного ниже сценария позволяет использовать любой тип входного фильтра для текста <input>, включая различные числовые фильтры. Это будет правильно обрабатывать Copy + Paste, Drag + Drop, сочетания клавиш, операции контекстного меню, не типизируемые клавиши, положение курсора, все раскладки клавиатуры и все браузеры начиная с IE 9 . Обратите внимание, что вы все еще должны выполнить проверку на стороне сервера!

Попробуйте сами на JSFiddle .

// Restricts input for the given textbox to the given inputFilter.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, 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);
      }
    });
  });
}

Использование:

// Restrict input to digits and '.' by using a regular expression filter.
setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value);
});

Некоторые входные фильтры, которые вы можете использовать:

• Целое число значения (положительные и отрицательные):
  /^-?\d*$/.test(value)
• Целое число значения (только положительные):
  /^\d*$/.test(value)
• Целое число значения (положительные и до определенного предела):
  /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
• Значения с плавающей точкой (допускается использование . и , в качестве десятичного разделителя):
  /^-?\d*[.,]?\d*$/.test(value)
• Валюта значения (т. Е. Не более двух десятичных знаков):
  /^-?\d*[.,]?\d{0,2}$/.test(value)
• Шестнадцатеричные значения:
  /^[0-9a-f]*$/i.test(value)

JQuery

Существует также версия этого jQuery. См. этот ответ или попробуйте сами на JSFiddle .

HTML 5

HTML 5 имеет встроенное решение с <input type="number"> (см. спецификацию ), но обратите внимание, что поддержка браузера варьируется:

• Большинство браузеров проверяют ввод только при отправке формы, а не при наборе.
• Большинство мобильных браузеров не поддерживают атрибуты step, min и max.
• Chrome (версия 71.0.3578.98) по-прежнему позволяет пользователю вводить символы e и E в поле. Также см. этот вопрос .
• Firefox (версия 64.0) и Edge (EdgeHTML версия 17.17134) по-прежнему позволяют пользователю вводить любой текст в поле.

Попробуйте сами на w3schools.com .

Более сложные параметры проверки

Если вы хотите выполнить некоторые другие проверки и проверки, это может быть полезно:

• https://gist.github.com/nbouvrette/84ef4f498ac06cdd5b60
• http://www.javascript -coder.com / HTML-формы / JavaScript форм-validation.phtml
• https://github.com/lockevn/html-numeric-input
• https://github.com/jonstipe/number-polyfill

Answer 2

Используйте этот DOM

<input type='text' onkeypress='validate(event)' />

И этот скрипт

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

Answer 3

Я искал долго и упорно за хороший ответ на это, и мы отчаянно нуждаемся <input type="number", но мало того, что эти два являются наиболее краткими путями я мог придумать:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

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

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

Answer 4

И еще один пример, который прекрасно работает для меня:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

Также прикрепить к событию нажатия клавиши

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

И HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

Вот пример jsFiddle

Answer 5

Вот простой пример, который допускает одно десятичное число, но не более:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

Answer 6

HTML5 имеет <input type=number>, что звучит как раз для вас. В настоящее время только Opera поддерживает его изначально, но есть проект , который имеет реализацию JavaScript.

Answer 7

Большинство ответов здесь имеют слабость использования ключевых событий .

Многие ответы ограничат вашу способность делать выбор текста с помощью клавиатурных макросов, копирования + вставки и более нежелательного поведения, другие, похоже, зависят от конкретных плагинов jQuery, которые убивают мух с помощью пулеметов.

Это простое решение, кажется, лучше всего работает для меня кроссплатформенно, независимо от механизма ввода (нажатие клавиш, копирование + вставка, щелчок правой кнопкой мыши на копирование + вставка, преобразование речи в текст и т. Д.) Все макросы клавиатуры для выделения текста по-прежнему будут работать, и это даже ограничит возможность установки нечисловых значений с помощью скрипта.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

Answer 8

Я решил использовать комбинацию из двух упомянутых здесь ответов, т.е.

<input type="number" />

и

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

<input type="text" onkeypress="return isNumberKey(event);">

Answer 9

HTML5 поддерживает регулярные выражения, поэтому вы можете использовать это:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

Предупреждение: некоторые браузеры пока не поддерживают это.

Answer 10

JavaScript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

дополнительно вы можете добавить запятую, точку и минус (, .-)

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type="text" onkeydown="validateNumber(event);"/ >