输入时格式化注册码

Posted 2023-05-08

【中文标题】输入时格式化注册码

【英文标题】：Format a registration key on entering

【发布时间】：2021-09-13 15:44:27

【问题描述】：

我正在尝试在用户将密钥输入到输入字段时对其进行格式化。

代码的格式是这样的SF8S-48WD-IR78（基本上是4个字母数字字符除以破折号）。

输入应该只接受键入的字母数字字符，不接受破折号，而是将破折号自动放在位置 5 和 10。关键是要消除输入或复制这些代码时的人为错误。

我的代码在这里有效，但用户不断输入额外的破折号，我不知道如何防止输入破折号而不从字符串中将它们全部删除。

<script>
    window.onload = function() 
        jQuery(document).ready(function($)
            $('input#code').bind('input propertychange', function()
                var val = $(this).val().toUpperCase().replace(/[^A-Z0-9\-]/g, '');
                if(val.length > 4 && val[4] != '-') 
                    val = val.substring(0, 4) + '-' + val.substring(4);
                
                if(val.length > 9 && val[9] != '-') 
                    val = val.substring(0, 9) + '-' + val.substring(9);
                 
                if(val.length > 14) 
                    val = val.substr(0, 14);
                
                $(this).val(val);
            );
        );
    
</script>

【参考方案1】：

考虑改用keydown。这样，如果您不想在您的领域中出现该事件，您就可以阻止该事件。

jQuery(function($) 
  $('#code').on('keydown', function(event) 
    if (event.key === "-") 
      event.preventDefault();
    
    var val = $(this).val().toUpperCase().replace(/[^A-Z0-9\-]/g, '');
    if (val.length > 4 && val[4] != '-') 
      val = val.substring(0, 4) + '-' + val.substring(4);
    
    if (val.length > 9 && val[9] != '-') 
      val = val.substring(0, 9) + '-' + val.substring(9);
    
    if (val.length > 14) 
      val = val.substr(0, 14);
    
    $(this).val(val);
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Code: <input type="text" id="code" />

查看更多：https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/