input type = "number" и IE10 +

Question

Я пытаюсь выполнить проверку на стороне клиента на стороне клиента с помощью элемента HTML5 <input type="number">. Существует также проверка на стороне сервера, поэтому давайте не начнем разглагольствовать об этом ...;)

Я хочу предоставить три уровня статуса проверки: зеленый для допустимого числа в пределах заданного диапазона, желтый для выхода, номер диапазона или пустое поле, а красный - для нечислового ввода.

Моя проблема в том, что IE11 (и, я полагаю, IE10), кажется, возвращает пустое свойство .value для нечислового ввода. То есть, если я ввожу abc в поле, .value - "". Это мешает мне отличить желтый (пустой) от красного (мусор).

Я знаю о существовании нового .valueAsNumber собственности, но это не совсем мне помочь, как я не могу отличить пустые от других браузеров и нечисловой на IE10/11 (.value пусто, .valueAsNumber является NaN) ,

Кто-нибудь решил эту проблему? Я не хочу прибегать к отслеживанию нажатий клавиш, и я хочу поддерживать старые браузеры (обратно в IE8), которые возвращаются к type="text" и не имеют .valueAsNumber. Заранее спасибо ...

Edit: просто для уточнения (надеюсь), мой вопрос заключается в том, что выход .value и .valueAsNumber в IE10/11 не позволяет мне различать без входа и без ввода цифр. Я хотел бы иметь возможность отличать эти два случая без обхода браузером и вернуться к type="text".

Answer 1

Не могли бы вы присвоить разумное значение по умолчанию (ноль?) Для вашего класса ввода? Тогда вам не нужно было бы делать различие в вашем коде в первую очередь?

Прагматизм всегда перевешивает изобретательность в моей книге;)

Answer 2

Идите вперед и использовать valueAsNumber в браузерах, которые поддерживают его.

var 
    coerced, 
    value, 
    input = yourInput; 

if(typeof input.valueAsNumber !== "undefined") { 
    value = (isNaN(input.valueAsNumber)) ? "dummystring" : input.valueAsNumber; 
} else { 
    value = input.value; 
} 

if(typeof input.value === "string") { 
//non-numeric 
} else { 
coerced = +input.value; 
//do validation on coerced - it is now a number 
} 

Браузеры, поддерживающие valueAsNumber, они также поддерживают input[type=number], так что это будет решить вашу проблему.