使用 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

您可以使用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" />

Answer 2

您可以嘗試使用正則表達式。 我希望這些代碼對你有幫助

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