如果用户专注于特定 div，我不想聚焦

Question

我正在使用 focusin() 函数将 div 动态附加到正在聚焦的输入框下方。现在，当用户 focusout 时，我删除了动态附加的 div，但问题是我想防止 div 在用户关注 div.

时自行删除

我的代码：

$('.ok').focusin(function() {
  $('.ok').after('<div class="thisdiv" tabindex="1">Okay Okay Okay</div>');
});

$('.ok').focusout(function() {
  if (!$('.thisdiv').is(':focus')) {
    $('.thisdiv').remove();
  }
});

.thisdiv {
  background: red;
  border: 2px dashed;
  width: 400px;
  padding: 50px;
}
.thisdiv:hover,
.thisdiv:active,
.thisdiv:focus {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="ok">

JSFiddle：https://jsfiddle.net/hq5dy61j/4/

Answer 1

您可以向动态 div 添加事件处理程序，以防止在单击 div 时更改焦点。当通过按 TAB 键更改焦点时，这将无济于事，这可能是合意的，也可能不是合意的。

这样做的一个影响是无法用鼠标选择动态 div 中的文本。如果您想要这种行为，您可能需要考虑切换到基于 class 的解决方案，这样您可以更好地控制状态变化。

$('.ok').focusin(function() {
  var $this = $(this),
    $div = $('<div class="thisdiv" >Okay Okay Okay</div>');

  $div.on('mousedown', function(e){
      e.preventDefault();
  });
  $this.after($div);
});

$('.ok').focusout(function() {
    $('.thisdiv').remove();
});

.thisdiv {
  background: red;
  border: 2px dashed;
  width: 400px;
  padding: 50px;
}
.thisdiv:hover,
.thisdiv:active,
.thisdiv:focus {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="ok">

如果用户专注于特定 div，我不想聚焦

I don't want to focusout if user is focused on particular div

jquery

focus

focusout