Як я можу отримати "реальне" значення <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 для нових типів введення

Відповідно до WHATWG , ви не можете отримати значення, якщо це не дійсне числове введення. Алгоритм санітації поля введення номера говорить, що браузер повинен встановити значення в порожній рядок, якщо введення не є дійсним номером з плаваючою комою.

Алгоритм санітарії значення такий: Якщо значення елемента не є дійсним числом з плаваючою комою , то встановіть його замість порожнього рядка.

Вказавши тип (<input type="number"> ), ви просите браузер виконати певну роботу за вас. Якщо, з іншого боку, ви хочете мати можливість захопити нечисловий ввід і зробити щось з ним, вам доведеться покластись на старе випробуване і справжнє поле для введення тексту та самостійно проаналізувати вміст.

W3 має ті ж характеристики і додає:

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

Це не відповідає на питання, але корисний спосіб вирішити - це перевірити

edQuantity.validity.valid

ValidityStateОб'єкта підказує про те, що вводиться користувач. Розглянемо type="number"вхід з a minі maxset

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

Бонус

У Spudly є корисна відповідь, що він видалив:

Просто використовуйте :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