Insert '-' every 5 characters as user types [eg product key]

Question

Possible duplicate:
Automatically format structured data (phone, date) using the jQuery plugin (or considering vanilla JavaScript)
Insert space after specific character in javascript string

I am trying to write a script that processes product keys, such as the ones you see on the back of software and games.

I would like the user, when entering his key code '-', insert every 5 characters for 5 character sets. Ex ( ABCDE-FGHIJ-KLMNO-PQRST-UVWXY ). Therefore, when the user enters ABCDE , as soon as " E " is entered, " - " is inserted immediately after using jQuery or JavaScript.

Thanks in advance. Please comment if you have any questions or if I am unclear :)

the form:

 <form method="post" action="process.php"> <p>Key: <input name="key" id="key" size="40"></p> <p><input type="submit"></p> </form> 

Answer 1

You can use http://digitalbush.com/projects/masked-input-plugin/

 jQuery(function($){ $("#key").mask("aaaaa-aaaaa-aaaaa-aaaaa-aaaaa"); }); 

Answer 2

HTML:

 <fieldset id="productkey"> <input type="text" size="5" maxlength="5"> <input type="text" size="5" maxlength="5"> <input type="text" size="5" maxlength="5"> <input type="text" size="5" maxlength="5"> <input type="text" size="5" maxlength="5"> </fieldset> 

JavaScript:

 $( '#productkey' ).on( 'keyup', 'input', function () { if ( this.value.length === 5 ) { $( this ).next().focus(); } }); 

Live demo: http://jsfiddle.net/XXLND/3/show/

You can also improve the code so that when the last text field is filled, the processing mechanism is activated:

 $( '#productkey' ).on( 'keyup', 'input', function () { var $field = $( this ); if ( $field.val().length === 5 ) { if ( $field.is( ':last-of-type' ) ) { $field.blur(); processKey(); } else { $field.next().focus(); } } }); 

Live demo: http://jsfiddle.net/XXLND/4/show/

Answer 3

How about using http://digitalbush.com/projects/masked-input-plugin

With this plugin:

 jQuery(function($){ $("#key").mask("99999-99999-99999-99999-99999",{placeholder:" "}); }); 

or, if all letters are used in your key:

 $("#key").mask("aaaaa-aaaaa-aaaaa-aaaaa-aaaaa",{placeholder:" "}); 

or, if it's alpha / numerical use:

 $("#key").mask("*****-*****-*****-*****-*****",{placeholder:" "}); 

Answer 4

Just because I don't like jQuery :)

 function insertSpace(string, part, maxParts) { "use strict"; var buffer = string.split("-"), step, i; for (i = 0; i < buffer.length; i += 1) { step = buffer[i]; if (step.length > part) { buffer[i] = step.substr(0, part); buffer[i + 1] = step.substr(part) + (buffer[i + 1] || ""); } else if (step.length < part) { if (i == buffer.length - 1) { if (!step) { buffer.pop(); } } else { buffer[i + 1] = step + (buffer[i + 1] || ""); buffer.splice(i, 1); i -= 1; } } } buffer.length = Math.min(maxParts, buffer.length); return buffer.join("-"); } 

Answer 5

Here is one approach:

 // binds to both the 'keyup' and 'paste' events $('input:text').on('keyup paste', function(e) { var that = $(this), // caches the $(this) val = that.val(), // access the value of the current input key = e.which, // determines which key was pressed allowed = [8, 46, 9, 16]; // defines 'allowed' keys (for editing/focusing) // backspace, delete, tab, shift if ($.inArray(key, allowed) == -1) { // if the pressed key is *not* an 'allowed' key if (val.length == 5) { // focuses the next element that.next().focus(); } else if (val.length > 5) { // truncates the string, if greater than 5 characters that.val(val.substring(0, 5)); that.next().focus(); } } });​ 

JS Fiddle demo .

The advantage of this approach is that instead of masking or manipulating the input line and taking into account multiple boundary cases, you simply help the user by moving the focus to the desired point. And in this case also allows the user to reorient the re-editing of previously entered data.

Answer 6

two things:

On the user side, I would avoid dynamically adding a character to the input field as the user enters the code. Depending on the environment, you risk interfering with what type of user. However, “-” helps the user to enter the code, as this is a guideline for him. Therefore, I would suggest entering an input field and show a nice version of the code next to it (or make the field invisible and control the focus of the field yourself).

For PHP code, instead of adding a character every 5 characters, I would do the opposite and simplify the code by removing all unnecessary characters. Something like that

 if ( str_replace('-', '', $userInputKey)==str_replace('-', '', $officialKey) { echo 'Yeah! Valid key!'; }