Format the text after 4 characters (ABCD-EFGH-IJKL) but allow editing-CodePudding

I am trying to format and allow edit formated string in input with jquery, but I cannot achieve editing formated string correctly. Actually when user make mistake when typing code into input and want to correct it, it jump user to the end of the chain, because it forced formate it when user delete a char. How can i edit it, to let user correct his mistake but still format the chain?

What user type: 8F489T4R8T5O7S8E

What user see: 8F48-9T4R-8T5O-7S8E

But when user want to correct O to 0, it make result like this 8F48-9T4R-8T57-S8E0, because it will forced reformat the string immediately and put the 0 to the end of the chain.

    $("input[name=login-access-token]").keyup(function(event){
        var input = $(this).val();
        input = input.replace(/[\W\s\._\-] /g, '');
        var split = 4;
        var chunk = [];
         
        for (var i = 0, len = input.length; i < len; i  = split) {
            split = 4;
            chunk.push( input.substr( i, split ) );
        }
        $(this).val(function() {
            var out = chunk.join("-").toUpperCase();
            
            if(out.length == 4 && event.keyCode != 8){
                    out  = "-";
            }
            
            if(out.length == 9 && event.keyCode != 8 ){
                    out  = "-";
            }
            
            return out;
        });
        
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<input type="text" name="login-access-token" placeholder="Code" />

CodePudding user response：

Added new if condition.

    $("input[name=login-access-token]").keyup(function(event){
     if (event.keyCode != 8 && event.keyCode != 46) { //New conditions added
        var input = $(this).val();
        input = input.replace(/[\W\s\._\-] /g, '');
        var split = 4;
        var chunk = [];
         
        for (var i = 0, len = input.length; i < len; i  = split) {
            split = 4;
            chunk.push( input.substr( i, split ) );
        }
        $(this).val(function() {
            var out = chunk.join("-").toUpperCase();
            
            if(out.length == 4 && event.keyCode != 8){
                    out  = "-";
            }
            
            if(out.length == 9 && event.keyCode != 8 ){
                    out  = "-";
            }
            
            return out;
        });
        }
    });

CodePudding user response：

I think this is a good use case for the plugin jquery-inputmask.

Take a look at the documentation, there are plenty of options.

If you combine it with the CSS property text-transform: uppercase, you get most of your desired behavior in a one-liner javascript (plus workable copy/paste and disabling non-alpha characters).

$("input[name=login-access-token]").inputmask()

input {
  font-family: monospace;
  text-transform: uppercase
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>

<input type="text" name="login-access-token" placeholder="Code" data-inputmask="'mask': '****-****-****-****'"/>