Question

我使用focusin（）函数在正在聚焦的输入框下方动态追加div。现在，当用户聚焦时，我删除了动态附加的div，但问题是我想阻止该div在用户专注于该div时自行删除。

我的代码：

＆＃13;

$('.ok').focusin(function() {
  $('.ok').after('<div class="thisdiv" tabindex="1">Okay Okay Okay</div>');
});

$('.ok').focusout(function() {
  if (!$('.thisdiv').is(':focus')) {
    $('.thisdiv').remove();
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

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

＆＃13;

$('.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();
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: