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

Question

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

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

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, вы можете также сделать все возможное и дать им палитру цветов. Есть много хороших .

Answer 2

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

Как пример:

Ваш HTML:

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

Ваш JS:

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

Но это не проверяет ввод пользователя (так что вам придется его расширить)

Answer 3

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

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

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