Textbox arkaplan rengini dinamik değiştirmek.

Javascripte bu tarz bir kontrolün veya işlemin farklı yöntemleri vardır. Fakat bu örnekte, arkaplan rengini değiştirmek için javascript'in onFocus ve onBlur olaylarını kullanıyoruz. onFocus olayı bir window, frame veya frameset nesnesine veya bir Form elementine fare veya klavye ile odaklanıldığı (focus) zaman gerçekleşen bir olaydır. onBlur olayı ise bu nesneler veya form elementi focus özelliğini kaybettiği zaman gerçekleşen bir olaydır.

Örneğimizde "Text" girişlerinin onfocus ve onblur olaylarını kendi fonksiyonlarımıza yönlendirerek kontrol ediyoruz. Hazırladığınız forma örnekte işaretlenmiş kodları eklemeniz yeterli olur. Dikkat edilmesi gereken tek konu, fonksiyon parametrelerinin ilgili text kontrolünün id ismi ile aynı olmasıdır.

Adı :
Soyadı :
E-Posta :

<html>
<head>
<script type="text/javascript">
function on_focus(deger)
{
    document.getElementById(deger).style.backgroundColor = 'White';
}
function on_blur(deger)
{
    document.getElementById(deger).style.backgroundColor = '#f0f0f0';
}
</script>
</head>
<body>
<table><tr><td>
Adı : </td>
<td><input id="Text1" type="text" onfocus='on_focus("Text1")' onblur='on_blur("Text1")' style="background-color: #f0f0f0; border: solid 1px #777;" />
</td></tr><tr><td>
Soyadı : </td>
<td><input id="Text2" type="text" onfocus='on_focus("Text2")' onblur='on_blur("Text2")' style="background-color: #f0f0f0; border: solid 1px #777;"/>
</td></tr><tr><td>
E-Posta : </td>
<td><input id="Text3" type="text" onfocus='on_focus("Text3")' onblur='on_blur("Text3")' style="background-color: #f0f0f0; border: solid 1px #777;"/>
</td></tr></table>
</body></html>