Перемещение фокуса, когда входное текстовое поле достигает макс. длины
У меня действительно есть форма номера кредитной карты. Число разделено на четыре части так же, как на реальной кредитной карте.
Я хочу добавить вкус JavaScript к форме, куда, когда пользователь вводит четыре буквы в поле, фокус автоматически переходит к следующему тегу. Но не в последнем теге. Путем выполнения этого пользователь не должен вводить ключ "вкладки" для перемещения фокуса.
Это должно хорошо добавить некоторый дополнительный класс, идентификатор или имя в тегах.
<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>
5 ответов
Я не пользовался этим инструментом раньше, но он делает то, что вы хотите. Вы можете просто посмотреть на его исходники, чтобы получить некоторые идеи:
Для вашей ситуации вы бы добавили этот код:
<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>
Здесь нет четырех полей, но проверяются кредитные карты (проверка целостности, а не алгоритм Луна!). Я должен сказать вам , как раздражает использование нескольких полей для пользователя и автозаполнение. Я рекомендую использовать только одно поле.
$("#myform").validate({
rules: {
field: {
required: true,
creditcard: true
}
}
});
/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});;
</script>
<script>
$(document).ready(function(){
$("#myform").validate({
rules: {
field: {
required: true,
creditcard: true
}
}
});
});
</script>
<style>#field { margin-left: .5em; float: left; }
#field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
br { clear: both; }
input { border: 1px solid black; margin-bottom: .5em; }
input.error { border: 1px solid red; }
label.error {
background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
padding-left: 16px;
margin-left: .3em;
}
label.valid {
background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
display: block;
width: 16px;
height: 16px;
}
</style>
</head>
<body>
<form id="myform">
<label for="field">Required, creditcard (try 446-667-651): </label>
<input class="left" id="field" name="field" />
<br/>
<input type="submit" value="Validate!" />
</form>
</body>
</html>
Я не тестировал его, но думаю, что это сработает. Вероятно, он также переместит фокус на кнопку, когда будет заполнено 4-ое поле.
$("form input").change(function () {
var maxLength = $(this).attr('maxlength');
if($(this).val().length == maxLength) {
$(this).next().focus();
}
}
Очень простое решение могло бы пойти так:
<script type="text/javascript">
function input_onchange(me){
if (me.value.length != me.maxlength){
return;
}
var i;
var elements = me.form.elements;
for (i=0, numElements=elements.length; i<numElements; i++) {
if (elements[i]==me){
break;
}
}
elements[i+1].focus();
}
</script>
<form action="post.php" method="post" accept-charset="utf-8">
<input type="text" value="" id="first" size="4" maxlength="4"
onchange="input_onchange(this)"
/> -
<input type="text" value="" id="second" size="4" maxlength="4"
onchange="input_onchange(this)"
/> -
<input type="text" value="" id="third" size="4" maxlength="4"
onchange="input_onchange(this)"
/> -
<input type="text" value="" id="fourth" size="4" maxlength="4"
onchange="input_onchange(this)"
/> -
<p><input type="submit" value="Send Credit Card"></p>
</form>
Как призывали другие, не делайте этого. Пользователи не смогут предугадать, что вы автоматически их запишете, и это сведет их с ума. Вы думали о пользователях, которые копируют и вставляют свою кредитную карту? В любом случае, в чем преимущество использования четырех полей?
Кроме того, не все кредитные карты делят свои номера на четыре набора из четырех. Например, American Express делит их на три группы чисел. Динамическое добавление и удаление текстовых полей в этом случае вызывает проблемы.
Вместо этого используйте Javascript для автоматического вставки пробелов , где они принадлежат, передвигая курсор, а не фокус. Первая цифра в номере указывает на тип кредитной карты (5 - Mastercard, 4 - Visa, 3 - American Express...), так что вы можете прочитать это, чтобы решить, куда добавлять пробелы. Отскребите пробелы в строке, когда будете их добавлять. Такой подход избавит вас и ваших пользователей от лишней боли.