0

我正在使用 focusin() 函数将 div 动态附加到正在聚焦的输入框下方。现在，当用户聚焦时，我删除了动态附加的 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/

4

1 回答 1

0

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

这样做的一个效果是动态 div 中的文本不能用鼠标选择。如果您想要这种行为，您可能需要考虑切换到基于类的解决方案，它可以让您更好地控制状态更改。

$('.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">

于 2016-08-03T20:17:28.003 回答