Фокус на первом пустом вводе

Question

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

Как я могу сосредоточиться на первом пустом вводе, который работает во всех браузерах?

$('input').each(function() { 
     if ($(this).val() == '') { 
      this.focus(); 
     } 
}); 

Answer 1

Просто return false; после фокусировки элемент разорвать петлю $.each(). В настоящее время фокус будет установлен на ваш последний пустой элемент, поскольку цикл продолжается.

Мы можем разбить цикл $ .each() на конкретной итерации, возвращая функцию обратного вызова false. Возврат не-false - это то же самое, что и оператор continue в цикле for; он немедленно перейдет к следующей итерации.

Источник: https://api.jquery.com/jquery.each/

Редактировать, чтобы быть ясно:

$('input').each(function() { 
    if ($(this).val() == '') { 
     this.focus(); 
     return false; 
    } 
}); 

---

Edit, так что вам не придется читать все комментарии:

Комплексное решение должен был использовать event.preventDefault() в соответствующем обработчике onSubmit, а затем проверить входы для пустых значений в этом. Впоследствии необходима дальнейшая обработка (как в: подтверждение и, наконец, отправка его (серверному) приложению) входов.

$('#loginForm').on('submit',function (e) { 
    e.preventDefault(); 

    // focus first empty input 
    $('#loginForm input').each(function() { 
     if ($(this).val() == '') { 
      this.focus(); 
      return false; 
     } 
    }); 

    // further input processing 
}); 

Answer 2

Это происходит потому, что вы перебираете все элементы ввода и вызова .focus(), если он не имеет никакого значения. Если поле имени пользователя и поле пароля не имеют значения, оно сначала вызовет .focus() в поле имени пользователя, но затем оно продолжит итерацию и вызовет .focus() в поле пароля, которое отвлекает внимание от поля имени пользователя. Вы хотите остановить итерацию по полям ввода при обнаружении первого без значения. Чтобы сделать это, просто return false;, чтобы показать JQuery, чтобы остановить итерацию.

$('input').each(function(){ 
    if($(this).val() == ''){ 
    this.focus(); 
    return false; 
    } 
}); 

Для сравнения, посмотреть демо:

Ваш путь: http://codepen.io/Chevex/pen/XbpeMd
С return false;: http://codepen.io/Chevex/pen/VLPMpr

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

Редактировать: здесь он работает в Opera.

Answer 3

Здесь ванильным JavaScript:

var input = document.getElementsByTagName('INPUT'); 
for (var i = 0, n = input.length; i < n; i = i + 1) { 
    // may also need to test for input[i].type 
    if (!input[i].value) { 
    input[i].focus(); 
    break; 
    } 
}