2011-03-27 3 views
3

Я просто хочу знать, как изменить цвет фона текстового поля на цвет, введенный в текстовое поле. Мне удалось сделать цвет текста, шрифт и размер, но делать фон так же, похоже, не работает. Мой код цвета текста и фона:Как изменить цвет фона текстового поля с помощью JavaScript

Сценарий:

function setColor(where, Color) 
    { 
     if (where == "backgroundcolour") 
      document.getElementById('textarea').style.backgroundColor = Color; 
     if (where == "colourtext") 
      document.getElementById('textarea').style.color = Color; 
    } 

HTML:

<p> 
    Card color: <input type = "text" name = "backgroundcolour" 
          size = "10" 
          onchange = "setColor('backgroundcolour', 
               this.value)"> 
    <br> 
    Text color: <input type = "text" name = "colourtext" 
          size = "10" 
          onchange = "setColor('colourtext', 
               this.value)"> 
    <br> 
</p> 
<textarea id = 'textarea' name="data" cols="100" rows="10"> 

</textarea> 

кажется, что мой интернет блокировало сценарий так Wouldnt изменить фон

+0

Вы должны использовать JQuery, чтобы сделать это – CarneyCode

+0

Как текст, вводимый? –

+0

Я вижу, что работает –

ответ

0

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

function setColor(where, Color) 
 
    { 
 
     if (where == "backgroundcolour") 
 
      document.getElementById('textarea').style.backgroundColor = Color; 
 
     if (where == "colourtext") 
 
      document.getElementById('textarea').style.color = Color; 
 
    }
<p> 
 
    Card color: <input type = "text" name = "backgroundcolour" 
 
          size = "10" 
 
          onchange = "setColor('backgroundcolour', 
 
               this.value)"> 
 
    <br> 
 
    Text color: <input type = "text" name = "colourtext" 
 
          size = "10" 
 
          onchange = "setColor('colourtext', 
 
               this.value)"> 
 
    <br> 
 
</p> 
 
<textarea id = 'textarea' name="data" cols="100" rows="10"> 
 

 
</textarea>

Смежные вопросы