Question

有没有办法让它成为一个html格式，有人输入内容，并自动使它成为一个国会大厦的字母，就像在软件密钥代码输入中一样，我希望在每次输入后自动插入一个破折号五个字符，但不是在最后一个字符之后，这意味着当有人输入时：

xxxxxxxxxxxxxxxxxxxx

它会自动实时输入到表单中：

XXXXX-XXXXX-XXXXX-XXXXX

有没有办法实时实现这一目标？这是我目前的表格代码：

<form name="key" autocomplete="off">
Key: <input type="text" name="key" maxlength="23"/>
<input type="submit" onclick="check(this.form)" value="  Submit  "/>
</form>
<script language="javascript">
function check(form)
{
if (form.key.value == "XXXXX-XXXXX-XXXXX-XXXXX")
{
window.open('URL')
}
else
{
alert ("Invalid Key")
}
}
</script>

Answer 1

这根本不是最佳选择，但它有效！

<script language="javascript">
$(function(){
    var isCorrect = false;
    $('#key_id').on('keyup',function() {
        $(this).val(function(i, text) {
            text = text.toUpperCase();
            if (text.length < 5) {
                isCorrect = false;
                return text;
            } else if (text.length >= 5 && text.length < 11 && (text.split("-").length - 1) < 1) {
                isCorrect = false;
                return text.substr(0,5) + '-' + text.substr(5,5);
            } else if (text.length >= 11 && text.length < 17 && (text.split("-").length - 1) < 2) {
                isCorrect = false;
                text = text.replace(/-/g, '');
                return text.substr(0,5) + '-' + text.substr(5,5) + '-' + text.substr(10,5);
            } else if (text.length >= 17 && text.length < 23 && (text.split("-").length - 1) < 3) {
                isCorrect = false;
                text = text.replace(/-/g, '');
                return text.substr(0,5) + '-' + text.substr(5,5) + '-' + text.substr(10,5) + '-' + text.substr(15,5);
            } else if (text.length >= 23) {
                isCorrect = true;
                text = text.replace(/-/g, '');
                return text.substr(0,5) + '-' + text.substr(5,5) + '-' + text.substr(10,5) + '-' + text.substr(15,5);
            } else {
                isCorrect = false;
                return text;
            }
        });
    });

   $("#my_form").submit(function(){
        if(isCorrect) {
            window.open('URL');
        } else {
            alert('invalid');
        }
    });
});
</script>

在事件键盘上（释放键=字母/数字），我这样做：

大写
如果小于5个字符
如果超过5个字符但少于10 + 1个字符，则返回带有“ - ”的文本（+1是因为我们添加了“ - ”）。如果已添加' - '
如果超过10 + 1个字符但少于15 + 2个字符（因为2' - '），则返回带有2' - '的文本。如果已添加2' - '。

等等......

编辑： 更新了代码，您需要使用jQuery并将id添加到输入id="key_id"

编辑： 新代码，更易于使用。还需要jQuery（你可以不用，在StackOverflow上搜索如何在纯javascript中转换$（id）.val（））。

http://jsfiddle.net/f8BzW/1/

Answer 2

您可以使用css进行大写：text-transform: uppercase;

使用jquery +这个插件：http://digitalbush.com/projects/masked-input-plugin/

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

查看演示

因此，在阅读完评论之后，我决定在演示中为您编写代码。

这是小提琴：http://jsfiddle.net/doppel/v3eLX/#&togetherjs=KgqxizB1Fc

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <title></title> 
</head>

<body>
    <form name="key" autocomplete="off">
        <label for="key">Key:</label><input type="text" name="key" id="key" style="text-transform:uppercase;" maxlength="23"/>
        <input type="submit" onclick="check(this.form)" id="btn" value="Submit"/>
    </form>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="jquery.maskedinput.js"></script>
    <script language="javascript">
        function check(form)
        {
            if (form.key.value == "XXXXX-XXXXX-XXXXX-XXXXX")
                window.open('URL')
            else
                alert ("Invalid Key")
        }

        $("document").ready(function() {
            $("#key").mask("aaaaa-aaaaa-aaaaa-aaaaa",{placeholder:" "});
        });
    </script>
</body>

请注意，您必须下载插件并像我一样包含它或复制小提琴代码。

所以当你看到我添加了一个标签，因为它是正确的，我在输入中添加了一个Id以便于选择，注意我还添加了一个内嵌样式来强制大写，如上所述^^^^。

现在脚本$("document").ready(function() {准备好使用jquery。

$("#key").mask("aaaaa-aaaaa-aaaaa-aaaaa",{placeholder:" "});这个语句选择id键作为函数Mask的目标，这是一个被调用的插件，声明我们想要一个格式aaaaa-aaaaa-aaaaa-aaaaa，其中a等于“letter”。请注意，“a”和“9”表示字母和数字数据。并且“{占位符：”“}}”默认情况下插件会将下划线放置为占位符，但我将其更改为空格以查看您想要的更多内容。

HTML表单自动大写锁定

2 个答案: