动态输入框格式

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"> 

Answer 1

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"> 

Answer 2

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);

});

Answer 3

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/