The most recent project is to use chemical factories to input a large amount of data during use. They all use the keyboard area. In the past, data was entered through excel.
On the web page, you need to implement the carriage return function like Excel. I found questions about this on the Internet, but it is not very useful. Some people also provided ideas on how to do this.
After my own collation and testing, this problem can be solved well:
Required conditions
1. You can download the latest Jquery library address on the official website of jquery.com
2. Check the structure of the interface form and the corresponding form location
The following are some form structures
The code copy is 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="Login" />
</fieldset>
Pay attention to the context label relationship that needs to be located in the form
http://images.cnitblog.com/i/461877/201403/131104380377939.jpg
After generating the page, no matter where the punctuation element is, there is a little label element with the unchanged structure. After that, we have to switch to the form element and type="text"
Then if you don’t know much about Jquery’s selector hierarchical selector prev+next positioning, you can view jquery’s help document. As long as you can locate the element you want to select, it doesn’t matter what method you use.
Here is the key script code:
The code copy is as follows:
<script type="text/javascript">
$(function () {
var i = 0;//Index
//The relationship between the above form location and context is that there will always be an input tag after label. The type may be Password, maybe text, or other
//You can modify it according to your personal needs. Here, only the form with type="text" is located here. If there is a form, it will be changed to $("label+ input") to follow your personal needs.
$("label+ :text").each(function () {
$(this).keydown(function (e) {
if (e.keyCode == 13) {
i++;//Next positioned index
try {
$("label+ :text")[i].focus();
} catch (e) {//The element may not be found in the next one, and an exception will occur through try to catch it. The program will not be abnormal.
return false;//It must be written to avoid the error message being submitted
}
return false;//It must be written to avoid the error message being submitted
}
});
});
});
</script>
You can try it! ! ! Hope it will be helpful to you