it-roy-ru.com

Как сфокусировать следующее поле ввода на нажатии клавиши

Я делаю мобильное приложение. Я хочу реализовать эту функцию, когда при нажатии клавиши фокусируется следующее поле ввода. Я перепробовал много вещей, но, похоже, ничего не работает. Это мой код Я попытался использовать onClick, но когда я касаюсь его, он переходит к следующему полю.

<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />

Я хочу чистое Jquery или Javascript решение. Заранее спасибо.

15
Ali Zia

Как насчет:

$('input.mobile-verify.pass').on('keyup', function() {
    if ($(this).val()) {
        $(this).next().focus();
    }
});

Так что, если есть значение, сосредоточьтесь на следующем. Использование keyup позволяет вам проверять содержимое, а не пропускать сразу. Например, они могут переключиться в числовой режим на iOS, что вызовет фокусировку, если вы просто нажмете клавишу.

Codepen: http://codepen.io/anon/pen/qaGKzk

15
OK sure

Используйте .next() и .trigger() :

$(".mobile-verify.pass").on("keypress", function(e){
  $(this).next().trigger("focus");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" class="mobile-verify pass" name="code[]" />
<input type="number" class="mobile-verify pass" name="code[]" />
<input type="number" class="mobile-verify pass" name="code[]" />
<input type="number" class="mobile-verify pass" name="code[]" />

Примечание: найдите другое решение для функциональности атрибута maxlength, согласно maxlength, игнорируемому для типа ввода = «число»

17
wscourge

Используйте . нажатие клавиш () и .focus ()

Фрагмент: 

$(document).ready(function (){
  $("input.mobile-verify.pass").keypress(function(){
    $(this).next().trigger('focus');
    //or $(this).next().focus();	
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />

С full JS

var allElements = document.querySelectorAll('.mobile-verify.pass');
var i;
for (i = 0; i < allElements.length; i++) {
  var el = allElements[i];
  el.addEventListener("keypress", function () {
    this.nextSibling.nextSibling.focus();
  });
}
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />

NB: если вы спросите, почему 2 nextSibling, ответ таков: первый брат - это текст, представляющий небольшое пространство между двумя элементами

3
Aroniaina

Попробуйте функции .keypress () и .focus () в jQuery

https://api.jquery.com/keypress/

https://api.jquery.com/focus/

3
Rahul Salvi

JavaScript и события keypress и focus, а также проверка ключей: 

var elems = [].slice.call(document.querySelectorAll('.mobile-verify.pass'));

elems.forEach(function(el, i, array) {
  el.onkeypress = function(event) {
    // Validate key is a number
    var keycode = event.which;
    if (!(event.shiftKey === false && 
        (keycode === 46 || keycode === 8 || keycode === 37 || keycode === 39 || 
        (keycode >= 48 && keycode <= 57)))) {
      return;
    }

    var nextInput = i + 1;
    if (nextInput < array.length) {
        array[nextInput].focus();
    }
  };
});
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />

3
Yosvel Quintero

Другие уже написали решения. Я просто хотел добавить, что часть 

[].slice.call

это то, что решило мою проблему. Я не мог сфокусировать элемент, потому что он имел тип Element, а не HtmlElement. Но почему-то эта часть кода преобразует мой список элементов querySelectorAll в HtmlElements.

Спасибо Йосвел Кинтеро

0
Marcus Ekström