用户键入时每 5 个字符插入“-”[如产品密钥] [重复]

Question

可能重复：
Auto-format structured data (phone, date) using jQuery plugin (or failing that vanilla JavaScript)
Insert space after certain character into javascript string

我正在尝试编写一个脚本来处理您在软件和游戏背面看到的产品密钥。

我希望当用户输入他们的密钥代码时，每 5 个字符插入 5 个字符集的“-”。例如（ABCDE-FGHIJ-KLMNO-PQRST-UVWXY）。因此，当用户输入 ABCDE 时，只要输入“E”，就会在通过 jQuery 或 JavaScript 之后立即插入“-”。

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

表格：

<form method="post" action="process.php">
<p>Key: <input name="key" id="key" size="40"></p>
<p><input type="submit"></p>
</form>

Answer 1

您可以使用http://digitalbush.com/projects/masked-input-plugin/

jQuery(function($){
   $("#key").mask("aaaaa-aaaaa-aaaaa-aaaaa-aaaaa");
});

Answer 2

HTML：

<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>

JavaScript：

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

现场演示： http://jsfiddle.net/XXLND/3/show/

你也可以增强代码，这样当最后一个文本框被填满时，一个处理机制被激活：

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

现场演示： http://jsfiddle.net/XXLND/4/show/

Answer 3

只是因为我不喜欢 JQuery :)

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

Answer 4

用http://digitalbush.com/projects/masked-input-plugin怎么样

使用该插件，以下内容：

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

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

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

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

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

Answer 5

这是一种方法：

// 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();
            }
        }
});​

JS Fiddle demo.

这种方法的优势在于，您无需屏蔽或操作输入的字符串，也无需考虑多种边缘情况，而是通过将焦点移动到正确的点来帮助用户。并且，在这种情况下，还允许用户重新聚焦重新编辑之前输入的数据。

Answer 6

两件事：

在用户体验方面，我会避免在用户键入代码时在输入字段中动态添加字符。根据您运行的环境，您可能会干扰用户键入的内容。 但是，“-”有助于用户键入代码，因为这是他的参考点。所以我建议有一个输入字段并在它旁边显示一个漂亮的代码版本（或者使该字段不可见并自己管理该字段的焦点）。

对于 php 代码，不是每 5 个字符添加一个字符，而是相反，通过删除所有不必要的字符来简化代码。 类似的东西

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