JavaScript return perfect tab switching function

Source: Internet
Author: User
Tags jquery library

  This article mainly introduces JavaScript through the Carriage return tab switching function, the need for friends can refer to the following

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 input data now,    on the Web page needs to implement Excel That kind of carriage return line of function on the Internet to find about this problem but not very good, but also some people provide this idea how to do,    after my collation and testing, can well solve the problem:    requirements     1,jquery Library address can be downloaded to the jquery.com official website to download the latest     2, to view the structure of the interface form and the corresponding form position     Below are some of the form structure     code below : <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 "> User name </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 "> User name </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 "> User name </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 "> User name </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 "> User name </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 "> User name </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 "> User name </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 "> User name </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="/>  </fieldset>    Note the contextual label relationship of the form needs to be located   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 is behind us to switch to the form element and type= "text"     then through the jquery selector hierarchy selector Prev+next the location Not very knowledgeable. You can view the Help documentation for jquery, as long as you can navigate to the element you want to choose.     is the key script code:    code as follows: <script type= "text/ JavaScript ">  $ (function () {  var i = 0;//index  //the relationship between the position and context of the form is always followed by an input label type that may be passwor D may be text or other  //can be modified in accordance with personal needs, here only to the type= "text" form if there is a form, then change to $ ("label+ input") can be individual needs   $ ("label+: Text"). each (function () {  $ (this). KeyDown (function (e) {  if (E.keycode = = {  i++;//Next positioned index   try {&nbsp ; $ ("label+: Text") [I].focus (); } catch (e) {//to the last one may not find an element an exception will occur through a try capture without exception   return false;// Must write lest the error message be submitted  }  return false;//must be written lest the error message be submitted  } }); }); ;  nbsp   CAN try!!! I hope to help you  
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.