Как я могу получить «реальное» значение <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">управления?

Бонусное чтение

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

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

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

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

W3 имеет те же характеристики и добавляет:

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

Это не дает ответа на вопрос, но полезный обходной путь - проверить

edQuantity.validity.valid

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

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

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

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

User's 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)
{
   //Public Domain: no attribution required.
   if ((element.validity) && (!element.validity.valid))
   {
      //if html5 validation says it's bad: it's 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;
}

бонус

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

Просто используйте :invalidдля этого селектор CSS .

input[type=number]:invalid {
    background-color: #FFCCCC;
}

Это приведет к тому, что ваш элемент станет красным при вводе нечислового допустимого значения.

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

Подробнее читайте :invalid здесь .

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

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

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

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

Выберите ввод и получите выделение в виде строки

document.querySelector('input').addEventListener('input', onInput);

function onInput(){
  this.select(); 
  console.log( window.getSelection().toString() )
}

<input type='number'>

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