Question

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

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

任何人都可以帮助我吗？

Answer 1

您可以尝试使用类似

的内容

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

文本区域根本没有值，因为它们是用

调用的

<textarea>Content</textarea>

工作实例 http://www.bootply.com/ikSuqoPMqs

Answer 2

您必须以正确的顺序在页面上找到所有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>

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>

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

使用jQuery将焦点设置为第一个空输入或textarea

4 个答案: