Установка значения в HTML 5 числового ввода не меняет достоверность

Question

Установка значения в HTML 5 числового ввода не меняет достоверность

0

Если я ввожу в текстовое поле с числовым текстом html 5 какое-то недопустимое значение, скажем, "abc", тогда программным образом установите значение в допустимое значение, оно оставит недействительный псевдокласс активным. Есть ли способ, чтобы я мог правильно его проверить?

<style>
    input[type='number']:invalid { border: 1px solid red !important;}
    input[type='number']:valid { border: 1px solid green !important;  }
</style>
<form>
    Type something invalid:
    <input type='number' id='numericinput' />

    <button onclick="numericinput.value = 5;" type="button">Set to valid</button>
</form>

JSfiddle для демонстрации http://jsfiddle.net/V49B3/1/

JonoT 25 апр. 2014, в 12:32

Источник

0

Меня устраивает
chris97ong 25 апр. 2014, в 09:44
0

Я отмечаю, что использую Chrome, возможно, он работает в других браузерах!
JonoT 25 апр. 2014, в 09:54
0

Я тоже использую Chrome
chris97ong 25 апр. 2014, в 09:56
0

Это скорее взлом, а не решение, но я заметил, что дважды щелкнув по кнопке, можно установить срок действия. Делать это дважды в onclick также, кажется, работает. onclick = "numericinput.value = 5; numericinput.value = 5;" Вам нужно позвонить, чтобы подтвердить это явно, или установить фокус или что-то
Leonard Feehan 25 апр. 2014, в 10:00
0

@ LeonardFeehan: Спасибо за это, я согласен, это немного хак, но это все, что у меня есть на данный момент. Я попытался использовать checkValidity, это не сработало, я бы предпочел не устанавливать фокус, поскольку это обновление должно происходить в фоновом режиме.
JonoT 25 апр. 2014, в 12:55

Показать ещё 3 комментария

Теги:

javascript

html

html5

1 ответ

Ещё вопросы

Я отмечаю, что использую Chrome, возможно, он работает в других браузерах!
Это скорее взлом, а не решение, но я заметил, что дважды щелкнув по кнопке, можно установить срок действия. Делать это дважды в onclick также, кажется, работает. onclick = "numericinput.value = 5; numericinput.value = 5;" Вам нужно позвонить, чтобы подтвердить это явно, или установить фокус или что-то
@ LeonardFeehan: Спасибо за это, я согласен, это немного хак, но это все, что у меня есть на данный момент. Я попытался использовать checkValidity, это не сработало, я бы предпочел не устанавливать фокус, поскольку это обновление должно происходить в фоновом режиме.

YoannFleuryDev · Answer 1 · 2014-04-25T07-53-00.000Z

Я думаю, что лучший способ - использовать ввод с типом текста и проверить значение с помощью атрибута pattern. Вы можете найти полезное регулярное выражение на веб- сайте html5pattern.

<input type='text' id='numericinput' pattern='[0-9]*'/>

Спасибо, попробовал это на JSfiddle, без разницы :(
Вы изменили CSS: input[type='text']:invalid . Я тоже использую Chrome, и он работает как шарм.
Извините, я не прочитал ваш ответ правильно, я хочу остаться с полем ввода числового типа, так как оно обеспечивает правильную раскладку клавиатуры на мобильных устройствах (я знаю, что есть возможность поменять клавиатуру, но предпочел бы не идти по этому пути: ))
Я не думал о клавиатуре, я полностью упустил этот момент :)