Как получить исходное значение в поле <input type = "number" >?

Как я могу получить "реальное" значение поля <input type="number">?

У меня есть поле input, и я использую новый тип ввода HTML5 number:

<input id="edQuantity" type="number">

В основном это поддерживается в Chrome 29:

Теперь мне нужна возможность читать "сырое" значение, введенное пользователем в поле ввода. Если пользователь ввел номер:

затем edQuantity.value = 4, и все хорошо.

Но если пользователь вводит неверный текст, я хочу покрасить поле ввода красного цвета:

К сожалению, для окна ввода type="number", если значение в текстовом поле не является числом, тогда value возвращает пустую строку:

edQuantity.value = "" (String);

(по крайней мере, в Chrome 29)

Как я могу получить "необработанное" значение элемента управления <input type="number">?

Я попытался просмотреть список Chrome других свойств поля ввода:

я не видел ничего похожего на фактический ввод.

Не мог бы я найти способ узнать, пусто ли ящик, или нет. Возможно, я мог бы предположить:

value          isEmpty        Conclusion
=============  =============  ================
"4"            false          valid number
""             true           empty box; not a problem
""             false          invalid text; color it red

Примечание. Вы можете игнорировать все после горизонтального правила; это просто наполнитель, чтобы оправдать вопрос. Также: не путайте пример с вопросом. Людям может потребоваться ответ на этот вопрос по причинам, отличным от окрашивания красной коробки (один пример: преобразование текста "four" в латинский "4" символ во время события onBlur)

Как я могу получить "необработанное" значение элемента управления <input type="number">?

Чтение бонусов

jsВстроено все вышеперечисленное (обновлено)
Запись Quirkmode.org для новых типов ввода

Ответ 1

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

алгоритм дезактивации стоимости выглядит следующим образом: Если valueэлемент не является действительным числом с плавающей запятой, а затем устанавливает его в пустой строка вместо.

Указывая тип (<input type="number">), вы просите браузер выполнить некоторую работу за вас. Если, с другой стороны, вы хотели бы иметь возможность фиксировать нечисловый ввод и что-то делать с ним, вам придется полагаться на старый проверенный и верный текстовый ввод и самостоятельно анализировать содержимое.

W3 также имеет те же спецификации и добавляет:

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

Ответ 2

Он не отвечает на вопрос, но полезным решением является проверка

edQuantity.validity.valid

ValidityState объекта дает информацию о том, что пользователь вводил. Рассмотрим вход type="number" с параметрами min и max

<input type="number" min="1" max="10">

Мы всегда хотим использовать .validity.valid.

Другие свойства предоставляют только бонусную информацию:

Users Input   .value  .valid | .badInput  .rangeUnderflow  .rangeOverflow
============  ======  ====== | =========  ===============  ==============
""            ""      true   | false      false            false  ;valid because field not marked required
"1"           "1"     true   | false      false            false  
"10"          "10"    true   | false      false            false
"0"           "0"     false  | false      true             false  ;invalid because below min
"11"          "11"    false  | false      false            true   ;invalid because above max
"q"           ""      false  | true       false            false  ;invalid because not number
"³"           ""      false  | true       false            false  ;superscript digit 3
"٣"           ""      false  | true       false            false  ;arabic digit 3
"₃"           ""      false  | true       false            false  ;subscript digit 3

Вам необходимо убедиться, что браузер поддерживает проверку HTML5 перед его использованием:

function ValidateElementAsNumber(element)
{
   if ((element.validity) && (!element.validity.valid))
   {
      //if html5 validation says it bad: it bad
      return false;
   }

   //Fallback to browsers that don't yet support html5 input validation
   //Or we maybe want to perform additional validations
   var value = StrToInt(element.value);
   if (value != null)
      return true;
   else
      return false;
}

Bonus

У Spudly есть полезный ответ, который он удалил:

Просто используйте селектор CSS :invalid для этого.
input[type=number]:invalid {
    background-color: #FFCCCC;
}
Это приведет к тому, что ваш элемент станет красным, если нечисловой Действителен.

Поддержка браузера для <input type='number'> примерно такая же, как :invalid, поэтому проблем нет.

Подробнее о :invalidздесь.

Примечание. Любой код выпущен в общедоступном домене. Не требуется атрибуция.

Ответ 3

input.focus();
document.execCommand("SelectAll");
var displayValue = window.getSelection().toString();

Ответ 4

Отслеживать все нажатые клавиши на основе их кодов клавиш

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

http://unixpapa.com/js/key.html

Выберите вход и выберите выделение в виде строки

input.select(); 
var value = window.getSelection().toString();

Все кредиты: int32_t