Menu
I do have a credit card number form. The number is divided into four parts just as on a real credit card.
I want to add a JavaScript taste to the form where when a user types four letters in a field, the focus automatically goes to the next tag. But not in the last tag. By doing this, a user doesn't have to type "tab" key to move a focus.
It is okay to add some extra class, id or name in the tags.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>MoveFocus</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function() { // some code goes here. }); </script> </head> <body> <form action="post.php" method="post" accept-charset="utf-8"> <input type="text" value="" id="first" size="4" maxlength="4"/> - <input type="text" value="" id="second" size="4" maxlength="4"/> - <input type="text" value="" id="third" size="4" maxlength="4"/> - <input type="text" value="" id="fourth" size="4" maxlength="4"/> <p><input type="submit" value="Send Credit Card"></p> </form> </body> </html> 
268
The HTML <input> tag is used to get user input in HTML. To give a limit to the input field, use the min and max attributes, which is to specify a maximum and minimum value for an input field respectively. To limit the number of characters, use the maxlength attribute.
To set focus to an HTML form element, the focus() method of JavaScript can be used. To do so, call this method on an object of the element that is to be focused, as shown in the example. Example 1: The focus() method is set to the input tag when user clicks on Focus button.
The maximum length of a text field can be 255. Explanation: Text is a readable pattern of characters and the words can be encoded into computer-readable formats.
I haven't used this tool before, but it does what you want. You could just look at it's source to get some ideas:
This Plugin on GitHub
For your situation, you would add this code:
<script type="text/javascript" src="jquery.autotab.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#first').autotab({ target: '#second', format: 'numeric' }); $('#second').autotab({ target: '#third', format: 'numeric', previous: '#first' }); $('#third').autotab({ previous: '#second', format: 'numeric' }); }); </script> As others have urged, don’t do this. Users are not going to be able to anticipate that you’ll auto-tab them, and this will drive them nuts. Have you thought about users who copy and paste their credit card? What is the benefit of using four fields anyway?
Also, not all credit cards divide their numbers into four sets of four. American Express divides them into three groups of numbers, for example. Dynamically adding and removing text fields is asking for trouble in this case.
Instead, use your Javascript to automatically insert the spaces where they belong, advancing the cursor, not the focus. The first digit in the number indicates the type of credit card (5 is Mastercard, 4 is Visa, 3 is American Express…), so you can read this to decide where to add the spaces. Scrub the spaces out of the string when you post it. This approach will save you and your users a lot of pain.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
