JavaScript return perfect tab switching function _javascript tips

There is a project is to do for the chemical plant in the use of the process needs to enter a large number of data, the use of the keypad area, in the past is through Excel data entry now,

On the Web page needs to implement the function of the carriage return line of Excel to find on the internet about this problem but not easy to use, but also some people provide this idea how to do,

After my collation and testing, can be a good solution to this problem:

The conditions required

The 1,jquery library address can be downloaded to the Jquery.com official website for the latest

2, view the structure of the interface form and the corresponding table unit

Here are some of the form structures

Copy Code code as follows:

<fieldset>
<legend> Login Form </legend>
<ol>
<li>
<asp:label runat= "Server" associatedcontrolid= "UserName" > Username </asp:Label>
<asp:textbox runat= "Server" id= "UserName"/>
<asp:requiredfieldvalidator runat= "Server" controltovalidate= "UserName" cssclass= "Field-validation-error" errormessage= "User Name field is required. "/>
</li>
<li>
<asp:label runat= "Server" associatedcontrolid= "UserName" > Username </asp:Label>
<asp:textbox runat= "Server" id= "TextBox1"/>
<asp:requiredfieldvalidator runat= "Server" controltovalidate= "UserName" cssclass= "Field-validation-error" errormessage= "User Name field is required. "/>
</li>
<li>
<asp:label runat= "Server" associatedcontrolid= "UserName" > Username </asp:Label>
<asp:textbox runat= "Server" id= "TextBox2"/>
<asp:requiredfieldvalidator runat= "Server" controltovalidate= "UserName" cssclass= "Field-validation-error" errormessage= "User Name field is required. "/>
</li>
<li>
<asp:label runat= "Server" associatedcontrolid= "UserName" > Username </asp:Label>
<asp:textbox runat= "Server" id= "TextBox3"/>
<asp:requiredfieldvalidator runat= "Server" controltovalidate= "UserName" cssclass= "Field-validation-error" errormessage= "User Name field is required. "/>
</li>
<li>
<asp:label runat= "Server" associatedcontrolid= "UserName" > Username </asp:Label>
<asp:textbox runat= "Server" id= "TextBox4"/>
<asp:requiredfieldvalidator runat= "Server" controltovalidate= "UserName" cssclass= "Field-validation-error" errormessage= "User Name field is required. "/>
</li>
<li>
<asp:label runat= "Server" associatedcontrolid= "UserName" > Username </asp:Label>
<asp:textbox runat= "Server" id= "TextBox5"/>
<asp:requiredfieldvalidator runat= "Server" controltovalidate= "UserName" cssclass= "Field-validation-error" errormessage= "User Name field is required. "/>
</li>
<li>
<asp:label runat= "Server" associatedcontrolid= "UserName" > Username </asp:Label>
<asp:textbox runat= "Server" id= "TextBox6"/>
<asp:requiredfieldvalidator runat= "Server" controltovalidate= "UserName" cssclass= "Field-validation-error" errormessage= "User Name field is required. "/>
</li>
<li>
<asp:label runat= "Server" associatedcontrolid= "UserName" > Username </asp:Label>
<asp:textbox runat= "Server" id= "TextBox7"/>
<asp:requiredfieldvalidator runat= "Server" controltovalidate= "UserName" cssclass= "Field-validation-error" errormessage= "User Name field is required. "/>
</li>
<li>
<asp:label runat= "Server" associatedcontrolid= "UserName" > Username </asp:Label>
<asp:textbox runat= "Server" id= "TextBox8"/>
<asp:requiredfieldvalidator runat= "Server" controltovalidate= "UserName" cssclass= "Field-validation-error" errormessage= "User Name field is required. "/>
</li>
<li>
<asp:label runat= "Server" associatedcontrolid= "Password" > Password </asp:Label>
<asp:textbox runat= "Server" id= "Password" textmode= "Password"/>
<asp:requiredfieldvalidator runat= "Server" controltovalidate= "Password" cssclass= "Field-validation-error" errormessage= "password field is a required field. "/>
</li>
<li>
<asp:checkbox runat= "Server" id= "RememberMe"/>
<asp:label runat= "Server" associatedcontrolid= "RememberMe" cssclass= "checkbox" > Remember me?</asp:label>
</li>
</ol>
<asp:button runat= "Server" commandname= "Login" text= "logon"/>
</fieldset>

Note that you need to locate the context label relationship for the form
Yun_qi_img/131104380377939.jpg
After the page is generated, no matter where the punctuation element is, but there is a bit of a structural invariant label element that we want to switch to the form element and type= "text"

So through the Prev+next selector hierarchy selector in jquery, locate the help document for jquery that you don't know much about, as long as you can locate the element you want to select.

Here's the key scripting code:

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
var i = 0;//Index
The relationship between the above form position and the context is that there's always an input tag type behind the label: password may be text or other
Can be changed according to individual needs, here only to the type= "text" form if there is a form and then change to $ ("label+ input") can be personal needs
$ ("label+: Text"). each (function () {
$ (this). KeyDown (function (e) {
if (E.keycode = = 13) {
i++;//the next positioned index
try {
$ ("label+: Text") [I].focus ();
catch (E) {//next to the last one may not find an element an exception will occur through a try catch without an exception to the program
Return false;//must be written to prevent error messages from being submitted
}
Return false;//must be written to prevent error messages from being submitted
}
});
});
});
</script>

You can try!!!. I want to help you.