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" />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;
});
}
});
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': '****-****-****-****'"/>