2014-02-19 3 views
0

Я хочу установить желтый фон текстового поля, когда он получает фокус (только с JavaScript). Я попыталсяУстановить цвет фона текстового поля onfocus

txt.style.backgroundcolor = 'yellow'; 

и

txt.style = 'background-color: yellow'; 

и

txt.class = 'yellow'; 

, но ни один из них не работает.

Вот код:

<html> 
<head> 
<script language="JavaScript" src="form.js" type="text/javascript"></script> 
<style> 
.yellow { 
    background-color: yellow; 
} 
</style> 
</head> 
<body> 
    <input type='text' size='15' name='txta' Id='txta' 
     onfocus='txt_onfocus(this)' onchange='txt_onchange(this)'></input> 
    <br> 
    <input type='text' size='15' name='txtb' Id='txtb' 
     onfocus='txt_onfocus(this)' onchange='txt_onchange(this)'></input> 
    <br> 
    <Span id='span1'><span> 
</body> 
</html> 

JS:

function txt_onchange(txt) { 
    document.getElementById('span1').innerHTML = txt.value; 
} 

function txt_onfocus(txt) { 
    txt.style.backgroundcolor = yellow; 
} 
+0

[? Как изменить цвет фона в текстовом поле, когда OnFocus] (http://stackoverflow.com/questions/15975078/how-do -i-change-background-color-of-textbox-when-onfocus) –

+0

Поиск в google или Stack Overflow дал бы много ответов на ваш вопрос и, вероятно, был бы быстрее, чем создавать вопрос и ждать ответа. Это сказано, хотя здесь большой ресурс, если вы начинаете работу с JS: http://www.w3schools.com/js/default.asp –

ответ

1

Существует хороший способ в CSS. Вы можете использовать CSS фокусLink

<!DOCTYPE html> 
<html> 
<head> 
<style> 
input:focus 
{ 
background-color:yellow; 
} 
</style> 
</head> 
<body> 

<p>Click inside the text fields to see a yellow background:</p> 

<form> 
First name: <input type="text" name="firstname" /><br> 
Last name: <input type="text" name="lastname" /> 
</form> 

<p><b>Note:</b> For :focus to work in IE8, a DOCTYPE must be declared.</p> 

</body> 
</html> 
+0

Спасибо, но я хочу через javascript, я изучаю теперь функции javascript. – user3326849

+0

Даже если вы изучаете JavaScript, вы все равно должны считать это хорошим ответом. Если существует родной путь, вы должны принять его, поскольку он будет всегда быстрее и эффективнее. Использование CSS: focus pseudo class - гораздо лучшее решение, чем использование JS; предполагая, что ваш браузер поддерживает демографию. –

-1
function txt_onfocus(txt){txt.style.backgroundColor='yellow';} 
+0

Спасибо, но все еще не работает. – user3326849

+0

Работает для меня, вы уверены, что копируете функцию правильно? http://jsfiddle.net/hDfNm/ – JJJ

0

попробовать этот

function txt_onfocus(txt) { 
    txt.style.background = "yellow"; 
} 

Reference

+0

Прекрасно это работает !!!! – user3326849

0

У вас есть несколько ошибок с вашим синтаксисом, но это должно работать:

http://jsfiddle.net/chrissp26/2Xgfr/124/

JavaScript:

function txt_onfocus(txt) { 
    txt.style.backgroundColor = "yellow"; 
} 

function txt_onchange(txt) 
{ 
    document.getElementById('span1').innerHTML=txt.value; 
} 

HTML

<input type="text" size="15" name="txta" Id="txta" onfocus="txt_onfocus(this);" onchange="txt_onchange(this)"/> 

<br> <Span id='span1'><span> 
0

цвет фона в Javascript написано "BackgroundColor", а также попробовать использовать шестигранные вместо названий цветов. желтый - # FFFF00 или, где два символа одинаковы, #FF0 в этом случае.

Я также добавил кнопку GO для вашего HTML, чтобы вызвать размытие. Нажав на нее, вы выходите из окна ввода и запускаете событие onchange.

<script type="text/javascript"> 
    function txt_onchange(obj) { document.getElementById('span1').innerHTML = obj.value; } 
    function txt_onfocus(obj){ obj.style.backgroundColor = "#FF0"; } 
</script> 
<HTML> 
<div id="wrap"> 
    <input type="text" size="15" name="txta" Id="txta" onfocus="txt_onfocus(this)" onchange="txt_onchange(this)"></input>&nbsp; 
    <input type="button" size="10" name="B1" value="Go"> <br> 
    <input type="text" size="15" name="txtb" Id="txtb" onfocus="txt_onfocus(this)" onchange="txt_onchange(this)"></input> 


Вы не вошли: ничего чек

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