4

可能重复：
使用 jQuery 插件自动格式化结构化数据（电话、日期）（或无法使用原生 JavaScript）
在特定字符后插入空格到 javascript 字符串中

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

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

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

形式：

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

6 回答 6

11

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

jQuery(function($){
   $("#key").mask("aaaaa-aaaaa-aaaaa-aaaaa-aaaaa");
});
于 2012-09-23T20:41:49.653 回答
2

如何使用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:" "});
于 2012-09-23T20:46:16.297 回答
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/

于 2012-09-23T20:54:40.080 回答
2

只是因为我不喜欢 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("-");
}
于 2012-09-23T21:21:32.257 回答
1

这是一种方法：

// 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 小提琴演示。

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

于 2012-09-23T20:56:59.570 回答
0

两件事情：

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

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

if ( str_replace('-', '', $userInputKey)==str_replace('-', '', $officialKey) {
 echo 'Yeah! Valid key!';
}
于 2012-09-23T20:49:18.940 回答