2011-12-16 2 views
2

Просмотрев все, кроме источника Gecko, я несколько смущен следующим поведением. Я хотел бы видеть, если я мог стилизации ввода текста, основанный на пользовательском вводе значения, и в конечном итоге в конечном итоге с этим CSS:Стиль ввода текста на основе типизированных данных, используя только CSS

input[value="password"] { 
    border:1px solid red; 
} 

Проблема заключается в том, что, кажется, значение входного сигнала проверяется только на создание элементов, как видно in this example.

Можно ли это сделать без использования Javascript? Почему браузер не обновляет стили соответственно?

ответ

2

Это не сработает, потому что селектора атрибутов «соответствуют элементам, которые имеют определенные атрибуты, определенные в исходном документе» (Attribute selectors in CSS 2.1). На самом деле все немного сложнее, потому что вызов setAttribute('value','password') в элементе input вызывает совпадение во многих браузерах (а не в IE). Но это не имеет значения, если вы не используете JavaScript.

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

<style> 
input:valid { border: 1px solid red; } 
</style> 
<input pattern=password id=x> 

Это использует HTML5 pattern атрибут, в этом случае, указав регулярное выражение, которое является просто фиксированной строкой, без маски, и the CSS3 Basic UI:valid псевдо-класс, который проверяет, соответствует ли состояние удовлетворяет ограничениям валидности элемента , Это не подходит для нормального использования (например, без поддержки в IE 9), но в особых ситуациях в контролируемых средах такие вещи могут быть полезными.

Однако браузеры, поддерживающие такие функции, как правило, имеют собственные сообщения об ошибках достоверности, например, специальный цвет вокруг окна, когда значение является недопустимым, и я не думаю, что вы можете изменить его в CSS. JavaScript может помочь, но ... Таким образом, отчетность может противоречить вашим целям здесь. Более того, кажется, что браузеры, поддерживающие эти функции, рассматривают состояние элемента как действительные, когда поле пусто. Это странно, и мы пытаемся обойти это, сделав вход обязательным (атрибут HTML5 required), похоже, открывают новые банки червей, а не исправляют. Но, возможно, в некоторых случаях вы можете использовать только некоторое начальное значение, например value="?", что ожидается, что пользователь заменит этот вход.

1

№. CSS не может проверить значение поля ввода за пределами того, что доступно в структуре HTML.

Когда вы вводите вводное поле, вы фактически не изменяете атрибут в HTML.

1

Это не работает, потому что вы фактически не изменяете атрибут value элемента. Например, посмотрите на эту скрипку:

http://jsfiddle.net/jblasco/J9xSd/

Это делает работу, потому что атрибут value на самом деле изменилось. Просто ввод текста в поле или его обновление с помощью используемого вами метода Javascript не изменяет его. Что обычно полезно, для получения значения по умолчанию позже, но, возможно, не очень полезно в этом смысле.