HTML表单自动大写锁定
[英]HTML forms auto caps lock
问题描述
Is there a way to make it so that in an html form, someone types something, and it automatically makes it a capitol letter, like in a software key code input, I would like there to automatically be a dash inserted after every five characters, but not after the last one, meaning that when someone types: 
有没有一种方法可以使某人以html格式键入内容，并自动将其变成大写字母，就像在软件密钥代码输入中一样，我希望每隔五个字符自动插入一个破折号，但不在最后一个之后，这意味着当有人键入以下内容时：
xxxxxxxxxxxxxxxxxxxx
it will automatically be entered in to the form in real time as: 它会自动以以下方式实时实时输入到表单中：
XXXXX-XXXXX-XXXXX-XXXXX
Is there a way to achieve this in real time? 有没有一种方法可以实时实现？ Here is my current code for the form: 这是我当前表单的代码：
<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>
2 个解决方案
解决方案1
0 已采纳 2014-03-08 21:31:22
This is not optimal at all, but it works ! 这根本不是最佳选择，但可以正常工作！
<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>
On the event keyup (releasing a key = letter/number), I do : 关于事件keyup（释放键=字母/数字），我这样做：
- UpperCase 大写
- Return the text normally if less than 5 char 如果少于5个字符，则通常返回文本
- Return the text with '-' if more than 5 char but less than 10+1 char (the +1 is because we added '-'). 如果大于5个字符但小于10 + 1个字符，则返回带有“-”的文本（+1是因为我们添加了“-”）。 Else return the text normally if already added the '-' 否则，如果已经添加了“-”，则通常返回文本
- Return the text with 2 '-' if more than 10+1 char but less than 15+2 char (because 2 '-'). 如果大于10 + 1个字符但小于15 + 2个字符，则返回带有2'-'的文本（因为2'-'）。 Else return the text normally if already added the 2 '-'. 否则，如果已添加2'-'，则正常返回文本。
And so on... 等等...
EDIT : Updated code, you will need to use jQuery and put an id to your input id="key_id" 编辑：更新的代码，您将需要使用jQuery并将id放入输入的id="key_id"
EDIT : New code, easier for you to use it. 编辑：新代码，更易于使用。 Still needs jQuery (you can do it without, search on StackOverflow how to convert $(id).val() in pure javascript). 仍然需要jQuery（您可以不使用jQuery，在StackOverflow上搜索如何在纯JavaScript中转换$（id）.val（））。
解决方案2
0 2014-03-08 21:31:56
You could use css for the capitalization: text-transform: uppercase; 您可以使用css进行大写： text-transform: uppercase;
And with jquery + this plugin: http://digitalbush.com/projects/masked-input-plugin/ 并使用jquery和此插件： http : //digitalbush.com/projects/masked-input-plugin/
jQuery(function($){
$("#key").mask("xxxxx-xxxxx-xxxxx-xxxxx-xxxxx");
});
check out the demo 查看演示
So after reading the comments I decided to code it all out in a demo for you. 因此，在阅读了注释之后，我决定将所有代码编写在一个演示中供您使用。
Here is the fiddle: http://jsfiddle.net/doppel/v3eLX/#&togetherjs=KgqxizB1Fc 这是小提琴： 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>
Note you will have to download the plugin and include it like I have or copy the fiddle code. 请注意，您将必须下载插件并像我一样包含它，或复制小提琴代码。
So as you see I added a label because its proper, I added an Id to the input to make it easier to select, Note I also added an in-line style to force Uppercase as stated above ^^^^. 因此，如您所见，我添加了一个标签，因为它的正确性，我在输入中添加了一个ID以使其易于选择，请注意，我还添加了一个内联样式来强制使用大写字母，如上面的^^^^。
Now the script $("document").ready(function() { gets jquery ready to be used. 现在，脚本$("document").ready(function() {使jquery可以使用了。
$("#key").mask("aaaaa-aaaaa-aaaaa-aaaaa",{placeholder:" "}); This statement selects id key as the target of the function Mask which is the plugin to be called stating that we want a format aaaaa-aaaaa-aaaaa-aaaaa where a is equal to "letter". 该语句选择id键作为函数Mask的目标，Mask是要调用的插件，声明我们想要aaaaa-aaaaa-aaaaa-aaaaa的格式，其中a等于“字母”。 Note only "a" and "9" denote alpha and numeric data. 仅注意“ a”和“ 9”表示字母和数字数据。 And "{placeholder:" "})" the plugin by default puts underscores as placeholders but I changed it to a space to look more what you want I think. 默认情况下，“ {placeholder：“”}）“插件将下划线作为占位符，但我将其更改为一个空格，以查看您想要的内容。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.