JQuery notes 7-several classic form applications

1. Text Box (lost) Focus

When the text box gets the input focus, it is not an application to highlight the text box. It is just a small trick to improve the user experience.

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

:



2. Elastic text domain

Elastic is a function-specific form plug-in that can control the highly auto scaling of form fields (<textarea>) tags on the page to adapt to the contained text. When using this plug-in, jquery. elastic. source. js needs to be introduced to the page.

Plug-in: Click to enter the download page


<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 

:



The rows attribute value of the <textarea> label we set at first is 2. The height of the label increases automatically as the text content increases. Of course, the rows attribute value can also decrease as the content decreases.

3. Autotab automatic Tab text box

Autotab is also a form plug-in with specific functions. It provides the auto-Skip function. When the number of characters entered by a user exceeds the defined maximum length, it will automatically jump to the corresponding element based on the preset target, saving the trouble
It is difficult for users to press the Tab key. The most typical application is to enter the IP address, software activation code, and so on. This plug-in can also be used in many areas in our web project, which is helpful for improving the user experience.
Jquery. autotab. js needs to be introduced during use. Click to enter the download page.


<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 

In addition to specifying the input length, you can use the autotab_filter () method to specify the input character type. This method can also filter uppercase, lowercase, spaces, and letters, you can find the details here.



If you change the above js:


$(function(){$('#autotab').submit(function(){return false;});$('#autotab :input').autotab_magic().autotab_filter('numeric');})
You can only enter numbers.

4. passwordStrength password Strength Indicator
The passwordStrength plug-in displays the password strength in a graphical manner based on the password entered by the user.

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> The preceding example uses an image:


Run:

5. formToWizard form filling wizard
What does this mean? In fact, we actually see a lot of things. Many websites fill in registration information step by step. For example, first fill in personal information, then fill in work information... and then submit it together. This avoids Pang.
A large amount of information is filled in on a page.
FormToWizard is a small plug-in to solve this problem. Plug-ins: Click to enter the download page

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 

:



6. checkbox check box (select all inverse operations)
It is often used in the past.
7. Applications in the drop-down list
First, let's look at the figure:

You must have seen a webpage with similar effects. How can this problem be achieved? The code is very simple:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Functions implemented by code:

1) Add the selected options to the other party
2) add all options to the other party
3) double-click an option to add it to the peer.