Question

我在input中有2个div，并且当用户将焦点从card1移开时，我想做些事情。我附加到card1的模糊事件侦听器无法正常工作，如何在div上执行此操作？

$('.card').blur( (event) => {
  console.log("blur")
});

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<div class="card1">
  <input class="title1">
  <input class="content1">
</div>

<div class="card2">
  <input class="title2">
  <input class="content2">
</div>

Answer 1

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
            <input class="title">
            <input class="content">
        </div>

Answer 2

将tabindex="0"添加到.card div中，使您可以集中div。

$('.card').blur( (event) => {
  console.log("blur")
});

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<div class="card" tabindex="0">
  <input class="title">
  <input class="content">
</div>

Answer 3

很好：

$(document).ready(function()
{
var flag=0;
$('.card1').hover( function() {
flag=1
});
$('.card2').hover( function() {
if(flag==1)
{
console.log("ok");
 flag=0;
 } 
});
});

<div class="card1">
  <input class="title1">
  <input class="content1">
</div>
<div class="card2">
      <input class="title2">
      <input class="content2">
</div>

Answer 4

经过研究，我发现您可以使用document.activeElement来确定要重点关注的输入

var checked = false;
var currentElement;
var prevElement;
$("input").focus(function() {
  if(checked) {
    checked = false;
    return;
  } else {
    prevElement = currentElement;
    currentElement = document.activeElement.id;
    if((prevElement === "title1" || prevElement === "content1") && (currentElement === "title2" || currentElement === "content2")) {
      alert("focus moved from card1 to card2");
    }else if((prevElement === "title2" || prevElement === "content2") && (currentElement === "title1" || currentElement === "content1")) {
      alert("focus moved from card2 to card1");
    }
    checked = true;
  }
});

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<div class="card1">
  Card1
  <input id="title1">
  <input id="content1">
</div>

<div class="card2">
  Card2
  <input id="title2">
  <input id="content2">
</div>

使用checked变量的第一部分是确保该函数不会一遍又一遍地运行。

第二部分设置当前选定的元素和先前选定的元素，以检查焦点是否已从div移出。

对于这样的元素，使用id代替class也是一个好习惯，因为id是唯一的，而class不是唯一的。

Answer 5

您需要检查焦点在每个父级内部的输入元素上，并向父级添加一些“活动”类。如果您从一张卡切换到另一张卡，则需要检查兄弟姐妹是否正在上课。

$('.card1,.card2').find('input').focus( (event) => {
	if (!$(event.target).parent().hasClass('active')){
    alert("focus on " + $(event.target).closest('div').attr('class'))
    $(event.target).closest('div').addClass('active'); 
  } else {
    if ($(event.target).closest('div').siblings().hasClass('active')) {
      $(event.target).closest('div').siblings().removeClass('active')
    }
  }
});

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<div>
  <div class="card1">
    <input class="title">
    <input class="content">
  </div>
  <br>

  <div class="card2">
    <input class="title">
    <input class="content">
  </div>
</div>

用于输入的div的onBlur

5 个答案: