当输入文本字段达到最大长度时移动焦点 [英] Moving a focus when the input text field reaches a max length
问题描述
我有一张信用卡号码表格。这个数字分为四个部分，就像在真实的信用卡上一样。
I do have a credit card number form. The number is divided into four parts just as on a real credit card.
我想在表单中添加JavaScript品味，当用户在字段中键入四个字母时，焦点自动转到下一个标签。但不是在最后一个标签。通过这样做，用户不必键入tab键来移动焦点。
I want to add a JavaScript taste to the form where when a user types four letters in a field, the focus automatically goes to the next tag. But not in the last tag. By doing this, a user doesn't have to type "tab" key to move a focus.
可以在其中添加一些额外的类，ID或名称。标签。
It is okay to add some extra class, id or name in the tags.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>MoveFocus</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
// some code goes here.
});
</script>
</head>
<body>
<form action="post.php" method="post" accept-charset="utf-8">
<input type="text" value="" id="first" size="4" maxlength="4"/> -
<input type="text" value="" id="second" size="4" maxlength="4"/> -
<input type="text" value="" id="third" size="4" maxlength="4"/> -
<input type="text" value="" id="fourth" size="4" maxlength="4"/>
<p><input type="submit" value="Send Credit Card"></p>
</form>
</body>
</html>
推荐答案
我之前没有使用过这个工具，但它做你想要的。您可以查看它的来源以获得一些想法：
I haven't used this tool before, but it does what you want. You could just look at it's source to get some ideas:
根据您的具体情况，您可以添加以下代码：
For your situation, you would add this code:
<script type="text/javascript" src="jquery.autotab.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#first').autotab({ target: '#second', format: 'numeric' });
$('#second').autotab({ target: '#third', format: 'numeric', previous: '#first' });
$('#third').autotab({ previous: '#second', format: 'numeric' });
});
</script>
这篇关于当输入文本字段达到最大长度时移动焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
