Способ обновления свойств CSS на лету на основе содержимого формы?

Question

У меня есть форма на веб-сайте, в которой один из входов должен использоваться для ввода шестнадцатеричных цветовых кодов для ввода в базу данных.

Есть ли способ для страницы динамически обновлять себя, чтобы, если пользователь меняет значение с «000000» на «ffffff», свойство «цвета» CSS в поле ввода будет немедленно изменяться без перезагрузки страницы ?

Answer 1

Не без Javascript.

С Javascript, однако ...

<input type='text' name='color' id='color'> 

И потом:

var color = document.getElementById('color'); 
color.onchange = function() { 
    color.style.color = '#' + this.value; 
} 

Если вы собираетесь идти по пути Javascript, хотя, возможно, и изо всех сил и дать им сборщик цветов. There are plenty of good ones.

Answer 2

Свойства CSS имеют соответствующие записи в HTML DOM, которые могут быть изменены с помощью Javascript.

This list несколько устарел, но он дает вам некоторые общие части CSS и их соответствующие имена свойств DOM.

Конечно, JS Lib, как, как jQuery делает это проще ...

Answer 3

Вы можете использовать Javascript для достижения этой цели.

В качестве примера:

Ваш HTML:

<input type="text" id="test" /> 

Ваш JS:

var test = document.getElementById('test'); 
test.onchange = function(){ 
    test.style.color = this.value; 
}; 

Но это не проверяет ввод пользователя (Таким образом, вы должны продлить его) ,