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

Question

I have an input field in which the user types a 12 digit number and I need to show it in the format XXXX XXXX XXXX (sapce after every 4 digits). How do I achieve it in javascript so that it works well with backspaces, editing in between etc.

This is what I have written but it misbehaves when I edit the input from somewhere in between.

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];
      }
  }}

Does this solve the issues? https://stackoverflow.com/questions/28779631/how-to-insert-space-after-four-characters-in-html-input#answer-28779756 — netoctone, Sep 03 '19 at 08:47
@netoctone It still doesn't allow me to edit 2 or more digits simultaneously from between as it moves the cursor to the end after every single edit. — Nick, Sep 03 '19 at 08:55
@JaromandaX because I though you are interested in helping and an better explained question will help you understand the problem more easily. Thanks anyway. — Nick, Sep 03 '19 at 09:07
To control the position of cursor you can use selectionEnd https://jsfiddle.net/4drkqo5j/ — netoctone, Sep 03 '19 at 09:59
@netoctone It works for me. Thank you so much! Please add it as an answer so that I can accept it. — Nick, Sep 09 '19 at 09:51

score 1 · Accepted Answer · answered Sep 10 '19 at 13:31

You can use selectionEnd to control the position of cursor

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

score 0 · Answer 2 · answered Sep 05 '19 at 13:32

you can try using regex. i hope these code help for you

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

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

2 Answers2