Javascript HTML表单自动大写锁定

有没有一种方法可以使它在html表单中，有人键入某个内容，它会自动将其变成国会大厦字母，就像在软件密钥代码输入中一样，我希望在每五个字符后自动插入破折号，但不是在最后一个字符后插入破折号，这意味着当有人键入时：

xxxxxxxxxxxxxxxxx

它将自动实时输入到表单中，如下所示：

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>

关键：
功能检查（表格）
{
如果（form.key.value==“XXXXX-XXXXX-XXXXX-XXXXX”）
{
window.open（'URL'）
}
其他的
{
警报（“无效密钥”）
}
}

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

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

$（函数（）{
var isCorrect=假；
$（'#key_id'）。在（'keyup'，function（）上{
$（this）.val（函数（i，文本）{
text=text.toUpperCase（）；
如果（文本长度<5）{
isCorrect=false；
返回文本；
}如果（text.length>=5&&text.length<11&&text.split（“-”）.length-1）<1，则为else{
isCorrect=false；
返回text.substr（0,5）+'-'+text.substr（5,5）；
}如果（text.length>=11&&text.length<17&&text.split（“-”）.length-1）<2，则为else{
isCorrect=false；
text=text.replace（/-/g'，）；
返回text.substr（0,5）+'-'+text.substr（5,5）+'-'+text.substr（10,5）；
}如果（text.length>=17&&text.length<23&&text.split（“-”）.length-1）<3，则为else{
isCorrect=false；
text=text.replace（/-/g'，）；
返回text.substr（0,5）+'-'+text.substr（5,5）+'-'+text.substr（10,5）+'-'+text.substr（15,5）；
}else if（text.length>=23）{
isCorrect=正确；
text=text.replace（/-/g'，）；
返回text.substr（0,5）+'-'+text.substr（5,5）+'-'+text.substr（10,5）+'-'+text.substr（15,5）；
}否则{
isCorrect=false；
返回文本；
}
});
});
$（“#我的表格”）。提交（函数（）{
如果（不正确）{
window.open（'URL'）；
}否则{
警报（“无效”）；
}
});
});

在事件keyup（释放密钥=字母/数字）中，我执行以下操作：

大写字母

如果少于5个字符，则正常返回文本

如果大于5个字符但小于10+1个字符，则返回带“-”的文本（1+1是因为我们添加了“-”）。否则，如果已添加“-”，则正常返回文本

如果大于10+1个字符但小于15+2个字符（因为2'-'），则返回带有2'-'的文本。如果已经添加了2'-'，则正常返回文本

等等

编辑： 更新代码后，您需要使用jQuery并在输入中输入一个id

id=“key\u id”

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

---

您可以使用css进行大写：

文本转换：大写

使用jquery+这个插件：

查看演示

因此，在阅读了这些评论之后，我决定在一个演示中为您将其全部编码出来

这是小提琴：


关键：
功能检查（表格）
{
如果（form.key.value==“XXXXX-XXXXX-XXXXX-XXXXX”）
window.open（'URL'）
其他的
警报（“无效密钥”）
}
$（“文档”）.ready（函数（）{
$（“#key”）.mask（“aaaaa-aaaaa-aaaaa-aaaaa”，{占位符：}）；
});


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

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

现在，脚本
$（“document”）.ready（function（）{
使jquery准备好使用

$（“#key”）.mask（“aaaaaaa-aaaaa-aaaaa-aaaaaaa-aaaaaaa，{占位符：}）；
此语句选择id key作为函数掩码的目标，函数掩码是要调用的插件，声明我们需要aaaaaaa-aaaaaaaa-aaaaaaaaa格式，其中a等于“字母”。注意，只有“a”和“9”表示字母和数字数据。“占位符：”）默认情况下，该插件将下划线作为占位符，但我将其改为一个空格，以便查看更多您想要的内容。
您想要实时查看还是提交？我想实时查看。@Babyazerty我不想要求更多，但我如何能将其嵌入到当前代码中？@Doppel您发布了所有代码吗？它看起来像是您发布的需要一个部分。你需要包含jquery。你以前使用过jquery吗？如果没有，这可能不是最好的选择。如果你不使用这个，你将不得不像其他答案一样编写自定义函数。我包含了我所有的代码。这不是一个完整的页面，因为我正在将它嵌入我的网站。我只是不知道如何在我的代码中包含这个函数正确地调用jquery和插件以及所有其他东西。我真的不太知道什么时候需要编码。@Doppelook在我发布的链接上；在usages下，它可以很好地告诉您如何使用它，但我会更新我的答案，尝试更好地说明这一点。您介意同时发布整个页面代码吗？或者-->www.jsfiddle.netCou你能在我的代码中包含这个吗？这样我就知道如何正确使用它了？因为它似乎不起作用。另外，在顶部，它说#input，我需要把它改成我表单的任何名称吗？@babyazerty如果我听起来像个完全的编码白痴，我很抱歉，但在底部，这是检查键是否正确的功能吗？如果是，呵呵我用它吗？它和以前不一样了
jQuery(function($){
    $("#key").mask("xxxxx-xxxxx-xxxxx-xxxxx-xxxxx");
});

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