Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Ввод номера сотового телефона (https://javascript.ru/forum/dom-window/13569-vvod-nomera-sotovogo-telefona.html)

DmitryOpalev 04.12.2010 13:45

Ввод номера сотового телефона
 
Здравствуйте!
У меня есть поля типа
8-<input size='3'>-<input size='3'>-<input size='2'>-<input size='2'>

Как сделать, что при заполнении одного поля, фокус автоматически переходил на следующее?

Gvozd 04.12.2010 14:18

Вы просите готовый скрипт с нуля.

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела.

DmitryOpalev 04.12.2010 14:51

Цитата:

Это работа, и за нее обычно платят деньги.
:) да :)
Мне надо чтоб вы мне показали, что надо расммотреть (функцию или еще что)

Gvozd 04.12.2010 14:57

используйте события onchange для первого элемента, и когда его свойство value(являющееся его содержимым) достигнет нужной вам длины, вызовите метод focus() у соответсвующегго элемента

Vulkan 04.12.2010 15:08

Вот вам решение, подстраивайте под свою страничку:
<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">

monolithed 04.12.2010 15:28

Как-то так:
<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: на самом деле еще нужно делать несколько проверок:
- только цифры
- очищать постидущие поля

Vulkan 04.12.2010 18:52

monolithed, в моём и твоём примере есть ещё один недостаток - если нажать клавишу любую и не отпускать, текст будет печататься но не перескакивать, понятно что происходит это всё из-за того что событие одно и проверяется только один раз при зажатии клавиши. А в моём примере также недостаток ещё это то что при полном поле инпута клавиша бекспейс не отработает, но это можно решить проверкой кейкода (код бекспейса 8).

monolithed 04.12.2010 19:41

Цитата:

Сообщение от Vulkan
monolithed, в моём и твоём примере есть ещё один недостаток - если нажать клавишу любую и не отпускать

Не вопрос подправить, я эту проблему сразу предусмотрел, но забыл о первых двух элементах (в последнем было):)

Цитата:

Сообщение от Vulkan
текст будет печататься но не перескакивать, понятно что происходит это всё из-за того что событие одно и проверяется только один раз при зажатии клавиши.

для этого достаточно ограничить вводимое количество символов использую maxlength.

Цитата:

Сообщение от Vulkan
А в моём примере также недостаток ещё это то что при полном поле инпута клавиша бекспейс не отработает, но это можно решить проверкой кейкода (код бекспейса 8).

Я вообще не смог его запустить (в fierefox точно не работает).

Vulkan 04.12.2010 20:39

Цитата:

Сообщение от monolithed (Сообщение 82269)
Я вообще не смог его запустить (в fierefox точно не работает).

Точно, в опере работает, в файрфоксе нет. Вот исправленный вариант:
<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 отожмётся уже условие для смены фокуса выполняться не будет.

рони 04.12.2010 20:59

monolithed, Vulkan на всякий случай сделайте проверку на наличие input[i+1] прежде чем передать ему фокус )))


Часовой пояс GMT +3, время: 07:58.