Javascript carriage return is perfect for TAB switching

One of the most famous projects was for a chemical factory. In the process of using it, a lot of data had to be input. It was all keypad area.

On the web page, you need to implement the function of return and line feed like excel. I found some questions about this on the Internet, but they were not very good, and some people provided some ideas on how to do this.

After my own sorting and testing, I can solve this problem well:

Required conditions

1. The latest Jquery library address can be downloaded from the official website of jquery.com

2. View the structure of the interface form and the corresponding form position

Here are some of the actual form structures

 
<fieldset> 
<legend> The login form </legend> 
<ol> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName"> The user name </asp:Label> 
<asp:TextBox runat="server" ID="UserName" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage=" The username field is a required field. " /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName"> The user name </asp:Label> 
<asp:TextBox runat="server" ID="TextBox1" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage=" The username field is a required field. " /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName"> The user name </asp:Label> 
<asp:TextBox runat="server" ID="TextBox2" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage=" The username field is a required field. " /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName"> The user name </asp:Label> 
<asp:TextBox runat="server" ID="TextBox3" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage=" The username field is a required field. " /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName"> The user name </asp:Label> 
<asp:TextBox runat="server" ID="TextBox4" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage=" The username field is a required field. " /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName"> The user name </asp:Label> 
<asp:TextBox runat="server" ID="TextBox5" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage=" The username field is a required field. " /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName"> The user name </asp:Label> 
<asp:TextBox runat="server" ID="TextBox6" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage=" The username field is a required field. " /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName"> The user name </asp:Label> 
<asp:TextBox runat="server" ID="TextBox7" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage=" The username field is a required field. " /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName"> The user name </asp:Label> 
<asp:TextBox runat="server" ID="TextBox8" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage=" The username field is a required field. " /> 
</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=" The password field is a required field. " /> 
</li> 
<li> 
<asp:CheckBox runat="server" ID="RememberMe" /> 
<asp:Label runat="server" AssociatedControlID="RememberMe" CssClass="checkbox"> Remember that I ?</asp:Label> 
</li> 
</ol> 
<asp:Button runat="server" CommandName="Login" Text=" The login " /> 
</fieldset> 

Note that you need to locate the context label relationship of the form
http://images.cnitblog.com/i/461877/201403/131104380377939.jpg
After the page is generated it doesn't matter where the punctuation is or where the punctuation is but there's a little bit of structure behind the label element which is we're going to switch to the form element and type="text"

If you don't know much about prev+next positioning through Jquery's selector hierarchy, you can check Jquery's help documentation. As long as you can locate the element you want to select, you can use what method

Here is the key script code:

 
<script type="text/javascript"> 
$(function () { 
var i = 0;// The index  
//So the relationship between the form location and the context above is that there's always an input label behind the label and the type could be Password could be text or whatever
//You can modify it according to your personal needs. If there is a form with type="text", you can change it to $("label+ input") according to your personal needs
$("label+ :text").each(function () { 
$(this).keydown(function (e) { 
if (e.keyCode == 13) { 
i++;//Index of the next location
try { 
$("label+ :text")[i].focus(); 
} catch (e) {//The next element of the last one may not be found and an exception may occur without the program having an exception caught by try
return false;//Must be written in case an error message is submitted
} 
return false;//Must be written in case an error message is submitted
} 
}); 
}); 
}); 
</script> 

Can try!! I hope it helped