格式化HTML输入文本产品密钥

时间:2013-03-08 14:44:26

标签: javascript html input format

我正在开发一个为Windows 7/8创建无人参与的XML文件的网站。

我已经输入了“产品密钥”文本输入,用户可以在其中输入产品密钥,然后将其添加到XML中,以便在安装过程中不会提示它们。

这是我到目前为止所做的:

<td>Product Key:</td>
<td><input id="ProductKey1" size="5" maxlength="5" type="text">-<input id="ProductKey2" maxlength="5" size="5" type="text">-<input id="ProductKey3" maxlength="5" size="5" type="text">-<input id="ProductKey4" maxlength="5" size="5" type="text">-<input id="ProductKey5" maxlength="5" size="5" type="text"></td>

我基本上添加了5个文本输入,最大长度为5个字符,每个字段用“ - ”分隔。

我想要做的是为产品密钥设置一个较长的字段,并在每5个字符后插入“ - ”。用javascript实现这个最简单的方法是什么?

3 个答案:

答案 0 :(得分:2)

您可以模拟破折号,将其放在输入字段上并添加onkeyup控件以添加空格,或者jquery.maskedinput:http://digitalbush.com/projects/masked-input-plugin/

答案 1 :(得分:0)

有很多方法可以实现这一目标。但我要做的是每5个字符“substr”字符串。我会这样做:

function split_product_key(t) {
    // How many characters in string
    var length = t.length;
    // How many "5 chars length strings" is there in your string
    var loop = Math.ceil(length/5);
    // Create the output.
    var output = '';
    for (var i =1; i<=loop; i++) {
        // Getting the 5 chars substr
        output += t.substr((i*5),5) + '-';
    }
    // Removing the last "-"
    output = output.substr(0, output.length-1);
    return output;
}

然后你要做的就是获取用户输入的产品密钥并将其传递给“split_product_key”,如下所示: var splitted_product_key = split_product_key(original_product_key); 如果要实时更新值,只需在输入上添加更改并输入值split_product_key(current_input_value) 我希望这很清楚,我希望它有所帮助!

答案 2 :(得分:0)

function split_product_key(t) {
    t = t.toUpperCase();
    var key = t.replace(/([\w]{4})([\w]{4})([\w]{4})([\w]{4})/, function(match, p1, p2, p3, p4, offset, string){
        return [p1, p2, p3, p4].join('-');
    });
    return key;
}

这个使用正则表达式使16位字符串看起来像'NLEB-8KPR-RZR1-QWJF',编辑正则表达式部分以更改模式。另外,这是一篇旧文章,但是我搜索了一个简单的解决方案,就是这样。