将文本格式化为4个字符(ABCD-EFGH-IJKL)，但允许编辑。

Question

我试图用jquery在输入中格式化并允许编辑格式化字符串，但无法正确地完成格式化字符串的编辑。实际上，当用户在输入中输入代码时出错并想要更正时，它会将用户跳到链的末尾，因为当用户删除一个字符时，它会强制格式化它。我如何编辑它，让用户纠正他的错误，但仍然格式化的链？

什么用户类型: 8F489T4R8T5O7S8E

用户看到什么: 8F48-9T4R-8T5O-7S8E

但是当用户想要将O更正为0时，它会产生类似于这个8F48-9T4R-8T57-S8E0的结果，因为它将强制立即重新格式化字符串并将0放在链的末尾。

​

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

​

Answer 1

添加了新的if条件。

    $("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;
        });
        }
    });

Answer 2

我认为这是插件jquery-输入掩码的一个很好的用例。

看看文档，有很多选择。

如果将它与CSS属性text-transform: uppercase组合起来，那么您可以在一个一行javascript (加上可行的复制/粘贴和禁用非alpha字符)中获得所需的大多数行为。

​

$("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': '****-****-****-****'"/>

​