Setzen Sie den Fokus auf die erste leere Eingabe oder Textarea mit jQuery

Question

Ich versuche, den Fokus auf die erste leere input oder textarea Feld auf einer Seite zu setzen. Dies funktioniert mit input s, aber nicht mit textarea s.

$(':input:text[value=""]').first().focus() 

Kann mir jemand helfen?

Answer 1

können Sie versuchen, suchen mit so etwas wie

$("textarea:empty,input:text[value='']").first().focus(); 

Textbereiche haben keinen Wert überhaupt, wie sie mit

<textarea>Content</textarea> 

Arbeitsbeispiel http://www.bootply.com/ikSuqoPMqs

Answer 2

genannt werden Sie‘ Ich muss alle input und textarea auf der Seite in der richtigen Reihenfolge finden. Sie können abfragen mit ihren Tag-Namen $('input, textarea'), aber um die richtige Reihenfolge beizubehalten verwenden Sie eine Klasse für alle von ihnen (.inputClass in dem Beispiel). Dann filtern die nicht leer sind, und .focus() die erste:

//** search for the input class and filter the elements found **/ 
 

 
var emptyAreas = $('.inputClass').filter(function(index, element) { 
 
    return $.trim($(element).val()) === ''; // element .val() is '' after trimming white spaces = true 
 
}); 
 

 
emptyAreas.first().focus(); // get the 1st element and focus it

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    
 
    <li><input class="inputClass" value="text"></li> 
 

 
    <li><textarea class="inputClass"></textarea></li> 
 

 
    <li><input class="inputClass" value=" "></li> 
 

 
    <li><textarea class="inputClass">text</textarea></li> 
 

 
    <li><textarea class="inputClass"> </textarea></li> 
 

 
</ul>

Answer 3

Mein Vorschlag ist:

$(':text, textarea').on('blur', function(e) { 
 
    var emptyField = $(':text, textarea').filter(function(index, element) { 
 
    return element.value == ''; 
 
    }); 
 
    if (emptyField.length > 0) { 
 
    emptyField.first().focus(); 
 
    } 
 
});

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 

 
<form> 
 
    First name:<br> 
 
    <input type="text" name="firstname"><br> 
 
    Last name:<br> 
 
    <input type="text" name="lastname"> 
 
    Comment:<br> 
 
    <textarea name="comment" form="usrform"></textarea> 
 
</form>