У меня есть странная проблема. Я не уверен, что я облажался или это может быть ошибкой в webkit.
То, что я делаю, - это использование более или менее сложных уловок CSS (: после и содержимое, селектор братьев и сестер и т. Д.) И пользовательских атрибутов данных, чтобы указать, являются ли поля ввода формы действительными или нет.
У меня есть атрибут данных «data-valid» в каждом поле ввода вместе с атрибутом «data-validate», который содержит регулярное выражение. В keyup я запускаю регулярное выражение для значения ввода и соответственно устанавливаю data-valid.
Затем у меня есть небольшой div рядом со входом, который стилизован с использованием корректного селектора чувствительных атрибутов данных. Фон будет показывать символ «ОК», если атрибут допустимых входных данных «родного брата» имеет значение «Истина», и символ сбоя, если он установлен на «Ложь».
Поскольку это может быть трудно понять, я соединил это jsfiddle , так что вы можете посмотреть на это самостоятельно.
Все это прекрасно работает в Firefox 6 и IE9. Однако в обоих браузерах на основе Webkit (Chrome + Safari) это не будет работать на 100% правильно. Несмотря на то, что атрибут data-valid изменяется правильно, стиль div не изменит своего внешнего вида, пока я не введу дополнительные символы или не сфокусирую поле ввода. Похоже, что браузеры Webkit не могут перерисовать / изменить стиль этого конкретного div.
Я действительно не знаю, что происходит, я довольно уверен, что это должно работать так, как я ожидаю. Я надеюсь, что кто-то может придумать какое-то понимание или даже объяснение и, возможно, исправление / обходной путь.
Большое спасибо!