Post
Ask Question

How To Use Style In InputBox Using Onfocus Event In JavaScript

How To Use Style In Input Box using Onfocus Event in java script
 
This blog helps to illustrate, how to style use in input box, using Onfocus event in JavaScript.
 
The style is (width, height, color, border etc.). You can use any type of style in the input box. In this blog, only border and color is used.
 
Step 1
 
Go to Notepad. Write HTML code and write JavaScript code in head of HTML document in Notepad.
 
1
 
Code
  1. <html>  
  2.   
  3. <head>  
  4.     <script type="text/javascript">  
  5.         function setStyle(x) {  
  6.             document.getElementById(x).style.border = "2px solid red";  
  7.             document.getElementById(x).style.background = "yellow";  
  8.         }  
  9.     </script>  
  10. </head>  
  11.   
  12. <body>  
  13.     First name: <input type="text" onfocus="setStyle(this.id)" id="fname">  
  14.     <br /> Last name: <input type="text" onfocus="setStyle(this.id)" id="lname">  
  15. </body>  
  16.   
  17. </html>  
Step 2
 
Next, save type as Filename. HTML in the file can be run in any Browser (EX- Internet Explorer, Google Chrome, Firefox).
 
2
 
Step 3
 
Click the textbox. It will be to change the color. You give the code, which will be showing onFocus event.
 
3