javascript - 动态输入框格式化

Question

我正在尝试格式化 <input>使用 javascript/jquery 的框。

目标 - 当用户键入时，每隔三个字符自动添加连字符。

123123123 becomes 123-123-123

我有一个可用的代码，但它 super 慢而且笨重。 我正在寻找有关如何改进代码的建议

$('#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

使用 input 事件而不是 keyup 跟踪输入字段的变化非常有用:

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

注意: 代码看起来很慢，因为 keyup 在您松开按键之前不会触发，但您可以在松开第一个字符之前键入下一个字符。

希望这对您有所帮助。

---

更新:

这里你不需要任何循环，你可以使用 substr 来剪切你的字符串并插入分隔符 - 并使用 maxlength 来定义您想要包含序列号的最大字符数:

$('#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">