使用jQuery将焦点设定到第一个空输入框或文本区域

Question

我正在尝试将焦点设置到页面上的第一个空 input 或 textarea 字段。这适用于 input，但不适用于 textarea。

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

有人能帮我吗？

- Mikeybash

Answer 1

您需要按正确的顺序查找页面上的所有input和textarea。 您可以使用它们的标签名称进行查询$('input, textarea')，但为了保持正确的顺序，请在所有输入元素上使用类（例如.inputClass）。 然后过滤非空元素，并将第一个元素.focus()：

//** 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>

- Ori Drori

Answer 2

您可以尝试使用类似以下的内容进行查找：

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

文本区域在被调用时没有任何值，因为它们是通过

标签进行调用的。

<textarea>Content</textarea>

示例代码： http://www.bootply.com/ikSuqoPMqs

- AceWebDesign

---

现在它应该按照你希望的方式完美运行。 - AceWebDesign

很高兴听到它对你有用。一个不错的简单解决方案。 :) 请接受答案并点赞。 :) - AceWebDesign

Answer 3

我的建议是：

$(':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>

- gaetanoM

Answer 4

关于.inputClass，@Ori Drori提出了很好的观点。

我稍微改进了你的答案。排除隐藏字段并动态添加.inputClass。

// adding .inputClass to inputs to maintain the order in the filter below
$('input, textarea').addClass('inputClass');
const emptyAreas = $('.inputClass').filter(function (index, element) {
    const hidden = $(element).is('hidden') || $(element).attr('type') === 'hidden'; // excluding hidden elements
    return !hidden && $.trim($(element).val()) === ''; // element .val() is '' after trimming white spaces
});

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

- Joakim Sandqvist