Javascript 插入'-'；用户键入时每5个字符[如产品密钥]

可能重复：

我正在尝试编写一个脚本来处理产品密钥，就像你在软件和游戏背面看到的那样

我希望这样，当用户输入他们的密钥代码时，每5个字符插入一个“-”，共5组字符。Ex（

ABCDE-FGHIJ-KLMNO-PQRST-UVWXY

）。因此，当用户输入

ABCDE

时，只要输入了“

E

”，就会立即通过jQuery或JavaScript插入“

-

”

提前谢谢。 如果您有任何问题或我不清楚，请发表评论：）

表格：

关键：

您可以使用

使用如何

使用该插件，可以实现以下功能：

jQuery(function($){
   $("#key").mask("99999-99999-99999-99999-99999",{placeholder:" "});
});

或者，如果您的钥匙是所有字母，请使用：

$("#key").mask("aaaaa-aaaaa-aaaaa-aaaaa-aaaaa",{placeholder:" "});

或者，如果是字母/数字用法：

$("#key").mask("*****-*****-*****-*****-*****",{placeholder:" "});

两件事：

在用户体验方面，我将避免在用户键入代码时在输入字段中动态添加字符。根据环境的不同，您可能会遇到干扰用户类型的风险。 但是，“-”帮助用户键入代码，因为这是他的参考点。因此，我建议设置一个输入字段，并在其旁边显示一个漂亮的代码版本（或者使该字段不可见，自己管理该字段的焦点）

对于php代码，我不会每5个字符添加一个字符，相反，通过删除所有不必要的字符来简化代码。 诸如此类

if ( str_replace('-', '', $userInputKey)==str_replace('-', '', $officialKey) {
 echo 'Yeah! Valid key!';
}

HTML:

现场演示：

您还可以增强代码，以便在填写最后一个文本框时激活处理机制：

$( '#productkey' ).on( 'keyup', 'input', function () {
    var $field = $( this );

    if ( $field.val().length === 5 ) {
        if ( $field.is( ':last-of-type' ) ) {
            $field.blur();
            processKey();              
        } else {
            $field.next().focus();            
        }
    }
});

现场演示：

这里有一种方法：

// binds to both the 'keyup' and 'paste' events
$('input:text').on('keyup paste', function(e) {
    var that = $(this), // caches the $(this)
        val = that.val(), // access the value of the current input
        key = e.which, // determines which key was pressed
        allowed = [8, 46, 9, 16]; // defines 'allowed' keys (for editing/focusing)
                                  // backspace, delete, tab, shift
        if ($.inArray(key, allowed) == -1) {
            // if the pressed key is *not* an 'allowed' key
            if (val.length == 5) {
                // focuses the next element
                that.next().focus();
            }
            else if (val.length > 5) {
                // truncates the string, if greater than 5 characters
                that.val(val.substring(0, 5));
                that.next().focus();
            }
        }
});​

---

这种方法的优点是，与其屏蔽或操纵输入的字符串，并考虑多个边缘情况，不如简单地通过将焦点移动到正确的点来帮助用户。而且，在这种情况下，还允许用户重新调整焦点，重新编辑以前输入的数据。

只是因为我不喜欢JQuery:）

函数insertSpace（字符串、部分、maxParts）{
“严格使用”；
var buffer=string.split（“-”），步骤i；
对于（i=0；i零件）{
缓冲区[i]=步骤substr（0，部分）；
缓冲区[i+1]=步进子程序（部分）+（缓冲区[i+1]| |“”）；
}否则如果（步长<零件）{
if（i==buffer.length-1）{
如果（！步）{
buffer.pop（）；
}
}否则{
缓冲区[i+1]=步进+（缓冲区[i+1]| |“”）；
缓冲拼接（i，1）；
i-=1；
}
}
}
buffer.length=Math.min（maxParts，buffer.length）；
返回buffer.join（“-”）；
}

是否要发布代码？有几种方法可以解决此问题。我个人认为使用多个输入框，用破折号分隔，效果最好。在输入框之间跳转要比尝试制作“格式化控件”容易得多像本地的一样工作。多个最多5个字符的输入框可以让你跳转到下一个，这是一个更好的主意。这些键是否会包含一个

-

@Dagon？我很喜欢这些想法，但你们中的任何人能提供一个js片段，在5个字符后从一个框跳到另一个框吗？所以，请确认$（“#key”）。掩码("99999-99999-9999-99999-99999")；带屏蔽的插件应该能用吗？是的。它能用。你可以创建不同的格式，但999只用于数字。Baba的答案是，他更快；）看足球时在iPad上打字没那么快；-）

str_replace

是PHP吗他想要一个java脚本解决方案+1用于

：最后一种类型

这不允许你将选项卡切换到以前的输入。

<fieldset id="productkey">
    <input type="text" size="5" maxlength="5">
    <input type="text" size="5" maxlength="5">
    <input type="text" size="5" maxlength="5">
    <input type="text" size="5" maxlength="5">
    <input type="text" size="5" maxlength="5">
</fieldset>

$( '#productkey' ).on( 'keyup', 'input', function () {
    if ( this.value.length === 5 ) {
        $( this ).next().focus();            
    }
});

$( '#productkey' ).on( 'keyup', 'input', function () {
    var $field = $( this );

    if ( $field.val().length === 5 ) {
        if ( $field.is( ':last-of-type' ) ) {
            $field.blur();
            processKey();              
        } else {
            $field.next().focus();            
        }
    }
});

// binds to both the 'keyup' and 'paste' events
$('input:text').on('keyup paste', function(e) {
    var that = $(this), // caches the $(this)
        val = that.val(), // access the value of the current input
        key = e.which, // determines which key was pressed
        allowed = [8, 46, 9, 16]; // defines 'allowed' keys (for editing/focusing)
                                  // backspace, delete, tab, shift
        if ($.inArray(key, allowed) == -1) {
            // if the pressed key is *not* an 'allowed' key
            if (val.length == 5) {
                // focuses the next element
                that.next().focus();
            }
            else if (val.length > 5) {
                // truncates the string, if greater than 5 characters
                that.val(val.substring(0, 5));
                that.next().focus();
            }
        }
});​

function insertSpace(string, part, maxParts) {
    "use strict";
    var buffer = string.split("-"), step, i;
    for (i = 0; i < buffer.length; i += 1) {
        step = buffer[i];
        if (step.length > part) {
            buffer[i] = step.substr(0, part);
            buffer[i + 1] = step.substr(part) + (buffer[i + 1] || "");
        } else if (step.length < part) {
            if (i == buffer.length - 1) {
                if (!step) {
                    buffer.pop();
                }
            } else {
                buffer[i + 1] = step + (buffer[i + 1] || "");
                buffer.splice(i, 1);
                i -= 1;
            }
        }
    }
    buffer.length = Math.min(maxParts, buffer.length);
    return buffer.join("-");
}