FrOzeN Posted November 21, 2007 Share Posted November 21, 2007 <html> <head> <title>Example</title> <style type="text/css"> input {background-color: #82CAFA;} </style> <script type="text/javascript"> <!-- function txt_focus(textbox) { document.getElementById(textbox).style.backgroundColor = "#AFDCEC"; } function txt_blur(textbox) { document.getElementById(textbox).style.backgroundColor = "#82CAFA"; } //--> </script> </head> <body> <input id="t1" type="text" onfocus="javascript:txt_focus('t1');" onblur="javascript:txt_blur('t1');" /><br /> <input id="t2" type="text" onfocus="javascript:txt_focus('t2');" onblur="javascript:txt_blur('t2');" /><br /> <input id="t3" type="text" onfocus="javascript:txt_focus('t3');" onblur="javascript:txt_blur('t3');" /><br /> <input id="t4" type="text" onfocus="javascript:txt_focus('t4');" onblur="javascript:txt_blur('t4');" /><br /> <input id="t5" type="text" onfocus="javascript:txt_focus('t5');" onblur="javascript:txt_blur('t5');" /><br /> <input id="t6" type="text" onfocus="javascript:txt_focus('t6');" onblur="javascript:txt_blur('t6');" /><br /> <input id="t7" type="text" onfocus="javascript:txt_focus('t7');" onblur="javascript:txt_blur('t7');" /><br /> <input id="t8" type="text" onfocus="javascript:txt_focus('t8');" onblur="javascript:txt_blur('t8');" /> </body> </html> Is there a shorter way I can do this? Like a global event when a textbox has focus, and another one for when a textbox doesn't have focus? Thanks. Quote Link to comment Share on other sites More sharing options...
pranav_kavi Posted November 21, 2007 Share Posted November 21, 2007 I can suggest u using a javascript framework-Prototype tat ll achieve wat u want. Quote Link to comment Share on other sites More sharing options...
emehrkay Posted November 24, 2007 Share Posted November 24, 2007 Yeah this isnt too bad. The first thing that you want to do is group the elements that you are working with. <div id="group_eles"> <input type="text" id="t1" /><br /> <input type="text" id="t2" /><br /> <input type="text" id="t3" /><br /> <input type="text" id="t4" /><br /> <input type="text" id="t5" /><br /> <input type="text" id="t6" /><br /> </div> Now I just used a very simple object to collect the elements and apply actions, it is kinda unnecessary, but it gives the functionality a namespace <script type="text/javascript"> var blur = { ini: function(){ var eles = document.getElementById('group_eles').getElementsByTagName('input'); for(e in eles){ eles[e].onblur = function(){ this.style.background = '#82CAFA'; }; eles[e].onfocus = function(){ this.style.background = '#AFDCEC'; }; } } }; onload = function(){ blur.ini(); } </script> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.