Using "onfocus" together with the "onblur" event:
When you enter the input field, a function is triggered which sets the background color to yellow.
When you leave the input field, a function is triggered which sets the background color to red.
<!DOCTYPE html> <html> <body> Enter your name: <input type="text" id="myInput" onfocus="focusFunction()" onblur="blurFunction()"> <script> function focusFunction() {/*from www . ja v a 2 s.c o m*/ // Focus = Changes the background color of input to yellow document.getElementById("myInput").style.background = "yellow"; } function blurFunction() { // No focus = Changes the background color of input to red document.getElementById("myInput").style.background = "red"; } </script> </body> </html>