Of Stack

Detailed usage of jquery form plug in Autotab

  • 2021-06-29 10:16:25
  • OfStack

Autotab is also a feature-specific form plugin that provides automatic tab jumping. When a user enters more than the maximum defined length of a character, it automatically jumps to the corresponding element based on a pre-set target, eliminating

Trouble of users pressing [Tab] key.The most typical application is to enter the IP address, software activation code and so on. There are many places we can use this plug-in in the web project, which is helpful to improve the user experience.

jquery.autotab.js is required when using, download address: Click to enter the download page 


<html>
 <head>
 <title> New Document </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="jquery-2.1.0.min.js" type="text/javascript"></script>
 <script src="jquery.autotab.js" type="text/javascript"></script>
 <script type="text/javascript">
 // Page Loading Method 
 $(function(){
 $('#autotab').submit(function(){
  return false;
 })
 $('#autotab :input').autotab_magic();// Bind for Page Text Box autotab Plug-in unit 
 })
 </script>
 </head>

 <body>
 <h1>jQuery Organize Notes 7</h1>
 <h2>Autotab automatic Tab Text Box </h2>
 <form method="post" action="" id="autotab">
 <label> Please enter the verification code: 
 <input type="text" name="num1" id="num1" maxlength="3" size="3">
 <input type="text" name="num2" id="num2" maxlength="3" size="3">
 <input type="text" name="num3" id="num3" maxlength="3" size="3">
 <input type="text" name="num4" id="num4" maxlength="3" size="3">
 <input type="text" name="num5" id="num5" maxlength="3" size="3">
 <input type="text" name="num6" id="num6" maxlength="3" size="3">
 </form>
 </body>
</html>

In addition to limiting the input length, you can also use autotab_The filter () method restricts the type of character that is entered. It also filters uppercase, lowercase, space, letters, etc. Use the checklist now.
If you change the js above to: 


$(function(){
 $('#autotab').submit(function(){
 return false;
 });
 $('#autotab :input').autotab_magic().autotab_filter('numeric');
})

Only numbers can be entered.

Related articles: