Jquery меняет сфокусированный ввод

0

Я пытаюсь создать систему, где, когда я заполняю текстовое поле, он переходит на следующий. В настоящее время у меня есть этот код:

 $('#txt1').keyup(function() {
    if(this.value.length == $(this).attr('maxlength')) {
       $('#txt2').focus();
    }
 });

Я хочу, чтобы это продолжалось, чтобы оно #txt3 в echo #txt3 #txt4 ect. Также был бы способ изменить сфокусированное текстовое поле с помощью клавиш со стрелками. EG, когда нажата клавиша со стрелкой вверх, изменяется с #txt4 на #txt3 и наоборот на клавишу вниз.

Заранее спасибо.

  • 1
    ИМО это не будет удобно для пользователя.
  • 0
    Поэтому, когда вы наберете максимальное количество символов, можете двигаться дальше, не дайте ли пользователю никакого шанса удалить символы или отредактировать ввод, просто перейдите к следующему? Я согласен с @undefined, есть причина, по которой вы не видите ничего подобного ... нигде!
Теги:
keyup

3 ответа

2
Лучший ответ

Вот код для решения вашего первого вопроса. Я добавил атрибут класса для удобства и заменил атрибут "maxlength" атрибутом "размер" HTML.

HTML

<p><input type="text" class="navigable" id="txt1" data-number="1" size="2" placeholder="dd"></p>
<p><input type="text" class="navigable" id="txt2" data-number="2" size="2" placeholder="mm"></p>      
<p><input type="text" class="navigable" id="txt3" data-number="3" size="4" placeholder="yyyy"></p>

JS

$('.navigable').keyup(function() {
var self = $(this);
var next = $('#txt'+(self.data('number')+1));
if(next.length > 0 && self.val().length == self.attr('size')) {
   next.focus();
}

});

Вы можете попробовать его здесь

У меня есть сомнения относительно вашего запроса о привязке клавиш со стрелками. Что произойдет, если пользователь хочет перейти на один из входов? Тем не менее, вот код, который должен учитывать клавиши со стрелками:

HTML

<p><input type="text" class="navigable" id="txt1" data-number="1" size="2" placeholder="dd"></p>
<p><input type="text" class="navigable" id="txt2" data-number="2" size="2" placeholder="mm"></p>
<p><input type="text" class="navigable" id="txt3" data-number="3" size="4" placeholder="yyyy"></p>

JS

$('.navigable').keyup(function(e) {
  var self = $(this);
  var currentInput = self.data('number');
  var next = $('#txt'+ (currentInput + 1));
  var previous = $('#txt'+ (currentInput - 1));
  var keyCode = e.keyCode || e.which;
  if(next.length && keyCode === 40)
      next.focus();
  else if(previous.length && keyCode === 38)
      previous.focus();
  else if(next.length && self.val().length == self.attr('size')) {
     next.focus();
  }

});

Вы можете попробовать его здесь

Поделиться
  • 0
    Спасибо, это то, что я ищу. Проблема в том, что я хочу, чтобы имя было идентификатором из БД, который не является упорядоченным идентификатором. Есть ли способ выбрать следующий элемент из «data-next»?
  • 0
    Да, конечно, вы можете. Но чтобы помочь вам найти лучшее решение, мне нужно немного больше информации. Являются ли входы частью одного и того же div? Это может позволить нам использовать jQuery: eq вместо использования атрибутов data- *.
1

У вас может быть событие нажатия клавиши, которое проверяет нажатие клавиши и на основе нажатой клавиши предпринять необходимые действия! EDIT: вы можете узнать, какая клавиша нажата, передав параметр в вызове функции

.keypress(function(e))
{
    if(e.which == 13)
       //take necessary action for enter key
    etc
}
Поделиться
  • 0
    Спасибо, попробую
  • 0
    Надеюсь, это поможет!
1

Привязка keydown события и проверить для правильного event.which:

  • Слева: 37
  • Вверх: 38
  • Справа: 39
  • Вниз: 40
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню