使用 javascript 格式化 XXXX XXXX XXXX 格式的 12 位数字

Question

我有一个输入字段，用户可以在其中输入一个 12 位数字，我需要以 XXXX XXXX XXXX 的格式显示它（每 4 位数字后留空）。我如何在 javascript 中实现它，以便它可以很好地处理退格、在中间进行编辑等

这是我写的，但是当我从两者之间的某个地方编辑输入时它表现不正常。

function format_outlet_id(value) {
  var content = value.value.trim();
  var length = content.length;
  var key = event.keyCode || event.charCode;
  if (!(key == 8 || key == 32 || key == 46)) {
      if (length == 12) {
          data = content.match(/.{1,4}/g);
          value.value = data[0] + " " + data[1] + " " + data[2];
      }
  }}

Answer 1

您可以尝试使用正则表达式。希望这些代码对你有所帮助

<div class="col-sm-3 form-group">
            <b>Aadhar No :*</b><br>
            <p><input title="Aadhar No" class="form-control" oninput="this.className = ''" name="aadharNo" id="aadharNo" valideAtt="aadhar" onblur="return defaultValidation(this)"></p>
            <span id="er_aadhar" style="display: block; width:100%; float: left;"></span>
 </div>




<script type="text/javascript">
            var REG_AADHAR = /^\d{4}\s\d{4}\s\d{4}$/;
            function defaultValidation(src){
                var getAttributeValue=src.attributes.valideAtt.value;
                if(getAttributeValue=="aadhar"){
                    if(!src.value.match(REG_AADHAR)){
                        $("#"+src.id).addClass("invalid");
                        $("#er_"+src.id).html("<span style=\"color:red\">Please Enter Valide Adhaar Number.<\span>");
                        return false;
                    }else{
                        $("#er_"+src.id).html("");  
                        return true;
                    }
                }
            }
</script>

Answer 2

可以使用selectionEnd来控制光标的位置

var target = document.querySelector('.creditCardText');

target.addEventListener("keyup", function() {
  var position = target.selectionStart;
  var prevVal = target.value;
  var newVal = prevVal.split(" ").join(""); // remove spaces
  if (newVal.length > 0) {
    newVal = newVal.match(new RegExp('.{1,4}', 'g')).join(" ");
  }
  target.value = newVal;
  
  for (var i = 0; i < position; i++) {
    if (prevVal[i] != newVal[i]) {
      target.selectionEnd = position + 1;
      return;
    }
  }
  target.selectionEnd = position;
});

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

使用 javascript 格式化 XXXX XXXX XXXX 格式的 12 位数字

format a 12 digit number in XXXX XXXX XXXX format using javascript

javascript

regex

jquery

number-formatting