Question

我在社区周围搜索过，看到有很多关于如何为表单元素制作（模糊（功能））或开启（聚焦（功能））的指导，但我还没有看到模糊元素当一个表格本身失去焦点时开始。我希望这种依赖于在提交之前更新两个字段的行为，但如果我在字段onblur（）上有效，则会产生错误错误，因为用户没有机会更新其他字段。

以下是我的基本概念的代码：

$(document).ready(function(){
    $("form").blur(function(){
        alert("This form has lost its focus.");
    });
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<form>
Enter your name: <input type="text">
Enter your age: <input type="text">
</form>
<p>Write something in the input field, and then click outside the field to lose focus (blur).</p>

</body>
</html>

如果我的.ready语句专注于“输入”而不是it works fine，但是当我希望文档监视整个表单时，它完全没有响应。有任何想法吗？谢谢！

Answer 1

您要查找的事件不是blur focusout。如果我们将focusout事件绑定到表单本身，则只要表单内的任何元素都丢失焦点，就会调用处理程序。

另请注意，我添加到各种元素的tabindex属性与此代码的工作无关。添加它们是因为对您的帖子做出了错误的评论，声称表单无法集中注意力。

从这里tabindex

tabindex全局属性指示其元素是否可以被聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此名称）。它接受一个整数作为一个值，取决于整数值的不同结果：


负值（通常是tabindex =＆＃34; -1＆＃34;）表示该元素应该是可聚焦的，但不应通过顺序键盘导航来访问。使用JavaScript创建可访问的小部件非常有用。

如您所见，任何元素都可以获得焦点。它只是默认情况下只有一些元素会获得焦点（锚点，输入，按钮等...）而不为它们设置tabindex。在下面的示例中，如果您单击＆＃34;输入您的姓名＆＃34;文本你将看到表单本身获得焦点。然后，您可以选项卡到输入，然后是div，最后是跨度。所有人都轮流获得焦点。

＆＃13;

$('#theForm').on('focusout', function(e) {
  // do what you want/need to do here
  console.log('Form has lost focus');
});

＆＃13;

#theDiv {
  height: 50px;
  width: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="theForm" tabindex="1">
Enter your name: <input type="text" tabindex="2">
Enter your age: <input type="text" tabindex="3">
</form>
<div id="theDiv" tabindex="4"></div>
<span tabindex="5">Some Text</span>
<p>Write something in the input field, and then click outside the field to lose focus (blur).</p>

＆＃13;

Jquery：表单上的.blur（）函数，而不是元素

1 个答案: