Question

我想为激活码创建一个输入。我的值类似于xxxx-xxxx-xxxx 并且不想使用多个输入来解决问题。

这意味着，当它的值长度等于4时，它会自动在它们之间附加一个（ - ）。

然后，如果用户粘贴代码xxxxxxxxxxxx，它将自动更改为xxxx-xxxx-xxxx

那么，我必须在单一输入中实现这样的条件，因为很多时候我已经尝试过逻辑，但未能创建一个有效且专业的。

HTML：

<input type="text" class="activation_code"/>

//以下不是练习方式和专业，所以如何更好的方式来做到这一点。谢谢：）

$('.activation_code').keyup(function(){
  var value = $(this).val();
      if(value.length == 4){
         $(this).val(value+'-');
      }
      if(value.length == 9){
         $(this).val(value+'-');            
      }    
});

Answer 1

我就是这样做的。您可以指定groupsize（您希望-之后的字符数），以及＆＃34; divider＆＃34;你要插入的字符。

＆＃13;

function convertTheInput(value, groupSize, dividerChar) {
  groupSize = groupSize || 4;
  dividerChar = dividerChar || "-";
  var newValue = "";
  value = value.split(dividerChar).join("");
  for (var i = 0; i < value.length; i++) {
    if (i % groupSize === 0 && i > 0) {
      newValue += dividerChar;
    }
    newValue += value[i];
  }
  return newValue;
}

$(document).ready(function() {
  $("#theInput").on("keyup", function() {
    $(this).val(convertTheInput($(this).val(), 4, "-"));
  });
  $("#theInput2").on("keypress", function() {
    $(this).val(convertTheInput($(this).val(), 3, " "));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="theInput" /> keyup, groupsize 4, "-" <br />
<input type="text" id="theInput2" /> keypress, groupsize 3, " "

＆＃13;

https://jsfiddle.net/es2qpkzc/6/

Answer 2

这种方式支持输入上的paste文字：

$(function(){
var test = $("#test");
  test.keyup(function(){
    var texto = $(this).val().split('-').join('');
    $(this).val(texto.match(/.{1,4}/g).join('-'));
  });
  test.on('paste',function(){
    var element = this;
      setTimeout(function () {
        var texto = $(element).val();
        $(element).val(texto.match(/.{1,4}/g).join('-'));
      }, 100);      
  });
});

jQuery-如何在输入中追加（ - ）

2 个答案:

工作小提琴：https://jsfiddle.net/robertrozas/z8zbg2fj/