Focus on using jQuery to change the form input (text) Method

User Experience has always been a factor in consideration, and you design a website. After researching many fields, such as human-machine interface (HCI) and availability. When designing the user interface, pay special attention to always placing text fields and then selecting the font. Although many web designers like to display in common ways... SyntaxHighlighter. all ();

User Experience has always been a factor in consideration, and you design a website. After researching many fields, such as human-machine interface (HCI) and availability. When designing the user interface, pay special attention to always placing text fields and then selecting the font. Although many web designers like to display in a common way, many people like to give users as much help as possible and fill the form at the same time. Therefore, fields must always be described with each input field in the HTML form. In addition, if we can highlight the way Users fill in, it can improve user experience.
 
Therefore, how can we implement the function? This is the current focus of our work. It is a highlighted input field?
Bronzing machine http://www.software8.co
Let's use jQuery and an HTML form to create a simple function.
 
Step 2: HTML code
We will use a simple HTML table in the following format and the focus Effect of jQuery.

 

Step 2: CSS style sheets
 
We will use a simple key area for style applications.
 
. Focus {
Border: 2px solid # AA88FF;
Background-color: # FFEEAA;
}
 
Step 2: Add effects using jQuery
 
We will use jQuery to add form elements. Two events are taken care. When the focus and focus of the input field are moved to the next text box (blured ).
$ ('Input [type = "text"] '). focus (function (){
$ (This). addClass ("focus ");
});
 
$ ('Input [type = "text"] '). blur (function (){
$ (This). removeClass ("focus ");
});
Online Demo