Dynamic input box formatting

Question

I am trying to format an <input> box using javascript / jquery.

The Goal - As the user types, add hyphens automatically after every third character.

123123123 becomes 123-123-123

I have a working code, but it is super slow and clunky. I am looking for recommendations on how to improve the code

$('#serial').keyup(function(){

  $(this).val( $(this).val().trim() );

  var str = $(this).val();
  var newStr = str.replace(/-/g, "");

  var valuesArray = newStr.split("");
  var newVal = "";

  while ( i = valuesArray.shift() ){
    if(newVal.length === 3){
      newVal += "-";
    } else if (newVal.length === 7){
      newVal += "-";
    }
    newVal += i;
  }
  $(this).val(newVal);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<label for="serial">Type something magical</label>
<input type="text" id="serial" name="serial">

Yea, I should note that the serial number is only 9 digits long. :) — mattdevio, Jan 29 '16 at 12:15
the first line does not need to assign the value to the input control — Martin Staufcik, Jan 29 '16 at 12:16

Zakaria Acharki · Accepted Answer · 2016-01-29T12:33:50.423

Use input event istead of keyup it's very useful to track input fields changes :

$('#serial').on('input', function(){

NOTE : The code seems slow because keyup won't fire until you release the key, but you can type the next character before releasing the first.

Hope this helps.

Update :

You don't need any loop here, you can use substr to cut your string and insert the separator - and use maxlength to define the max number of charaters you want to contain your serial :

$('#serial').on('input', function()
{
   var input_value = $(this).val().trim().replace(/-/g, "");
    
    if(input_value.length > 3){
      input_value = input_value.substr(0, 3) + '-' + input_value.substr(3);
    }
    if (input_value.length > 7){
      input_value = input_value.substr(0, 7) + '-' + input_value.substr(7);
    }
    
    $(this).val(input_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="serial" name="serial" maxlength="11">

score 1 · Answer 2 · edited May 23 '17 at 12:24

1

try this code, replaced inefficient regex with substring

$('#serial').input(function(){

  $(this).val( $(this).val().trim() );

  var str = $(this).val().trim().split( "-" ).join("");
  var output = "";
  while ( str.length > 3 )
  {
   output += str.substring(0,3) + "-";
   str = str.substring(3);
  }
  output += str;

  $(this).val(output);

});

edited May 23 '17 at 12:24

Community

1
1

answered Jan 29 '16 at 12:22

gurvinder372

66,980
10
72
94

This Def works, but it appears to be a little slow as well. I do think the approach is better then mine; however, Zakaria's answer seems to be best so far. – mattdevio Jan 29 '16 at 12:41

score 1 · Answer 3 · answered Jan 29 '16 at 12:31

A little further optimization

$('#serial').on('input', function() {

  var str = $(this).val().trim();
  var i = 3;
  while (i < str.length) {
    if (str.charAt(i) == '-') {
      i += 4;
    } else {
      str = str.slice(0, i) + '-' + str.charAt(str.length-1);
    }

  }
  $(this).val(str);

});

jsfiddle https://jsfiddle.net/h5hdvcwu/1/

Dynamic input box formatting

3 Answers3