Ввод номера сотового телефона
Здравствуйте!
У меня есть поля типа 8-<input size='3'>-<input size='3'>-<input size='2'>-<input size='2'> Как сделать, что при заполнении одного поля, фокус автоматически переходил на следующее? |
Вы просите готовый скрипт с нуля.
Это работа, и за нее обычно платят деньги. Для таких сообщений предназначен раздел форума "Работа". Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела. |
Цитата:
Мне надо чтоб вы мне показали, что надо расммотреть (функцию или еще что) |
используйте события onchange для первого элемента, и когда его свойство value(являющееся его содержимым) достигнет нужной вам длины, вызовите метод focus() у соответсвующегго элемента
|
Вот вам решение, подстраивайте под свою страничку:
<script>
window.onload=function(){
var inputs=document.getElementsByTagName('input');
for(i=0; i<inputs.length; i++) inputs[i].onkeydown='verifyLength(this, '+i+')';
}
function verifyLength(input, order){
var inputs=document.getElementsByTagName('input');
if(input.size==input.value.length) inputs[order+1].focus();
}
</script>
8 -<input size="3"> -<input size="3"> -<input size="2"> -<input size="2">
|
Как-то так:
<script type="text/javascript">
window.onload = function(){
var input = document.getElementsByName('input'), i = input.length;
while(i--){
input[i].onkeyup = (function(i){
return function(){
if (this.size == this.value.length && input[i + 1]) {
input[i+1].focus();
}
};
})(i);
}
};
</script>
8
-<input type="text" size="3" maxlength="3" name="input" />
-<input type="text" size="3" maxlength="3" name="input" />
-<input type="text" size="4" maxlength="4" name="input" />
PS: на самом деле еще нужно делать несколько проверок: - только цифры - очищать постидущие поля |
monolithed, в моём и твоём примере есть ещё один недостаток - если нажать клавишу любую и не отпускать, текст будет печататься но не перескакивать, понятно что происходит это всё из-за того что событие одно и проверяется только один раз при зажатии клавиши. А в моём примере также недостаток ещё это то что при полном поле инпута клавиша бекспейс не отработает, но это можно решить проверкой кейкода (код бекспейса 8).
|
Цитата:
Цитата:
Цитата:
|
Цитата:
<script>
window.onload = function () {
var inputs = document.getElementsByTagName('input');
for (i = 0; i < inputs.length; i++) {
inputs[i].onkeyup = (function (x) {
return function () {
if (inputs[x].size == inputs[x].value.length && inputs[x + 1]) {
inputs[x + 1].focus();
}
}
})(i)
}
}
</script>
8 -<input size="3" maxlength="3"> -<input size="3" maxlength="3"> -<input size="2" maxlength="2"> -<input size="2" maxlength="2">
С onkeyup backspace работает, ну понятно почему, событие проверяется когда клавиша отжимается, а когда backspace отожмётся уже условие для смены фокуса выполняться не будет. |
monolithed, Vulkan на всякий случай сделайте проверку на наличие input[i+1] прежде чем передать ему фокус )))
|
удалено.
|
рони, точно, я про это думал, но забыл, сейчас исправил
|
Вариант готового решения не нашёл, буду признателен если кто подскажет ссылку, пока собрал трёхколёсный велосипед без maxlength и рабочим backspace )))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
for (var b = document.getElementsByName("input"), e = b.length; e--;) {
b[e].onkeypress = function (d) {
return function (c) {
c = c || window.event;
a = c.which || c.keyCode;
if (this.size == this.value.length && a != 8) if (b[d + 1]) b[d + 1].focus();
else return false
}
}(e);
b[e].onkeydown = function (d) {
return function (c) {
c = c || window.event;
a = c.which || c.keyCode;
if (this.size == this.value.length && a != 8) if (b[d + 1]) b[d + 1].focus();
else return false;
if (this.value.length == 0 && b[d - 1] && a == 8) {
if (b[d - 1].createTextRange) {
a = b[d - 1].createTextRange();
a.collapse(false);
a.select()
} else if (b[d - 1].selectionStart) {
a = b[d - 1].value.length;
b[d - 1].setSelectionRange(a, a);
b[d - 1].focus()
}
return false
}
}
}(e)
}
};
</script>
</head>
<body>
8-
<input type="text" size="3" name="input" />
<input type="text" size="3" name="input" />
<input type="text" size="2" name="input" />
<input type="text" size="2" name="input" />
</body>
</html>
|
В чём проблема вводить все цифры в одно поле?
|
странно, что ты тот доклад не упомянул. Хотя в общем-то вряд ли ТС (и не только) его посмотрит, несмотря на то, что как раз тот случай (где-то с 18:45 :))
p.s. тема для оффтопа: "Что значит 'от добра добра не ищут'?" |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Когда удерживаешь клавишу до полного заполнения всех полей, потом если вернуться ко второму полю и ввести в него сиволы то он перебросит на третье и начнет добавлять в него символы в Firefox 3.6, в Opera 10.5 еще и последнее поле начинает принимать символы. |
| Часовой пояс GMT +3, время: 07:35. |