Question

我需要在单击输入时隐藏包含某些内容的div，但是当输入按标签焦点时，应显示内容。目前我可以使用内容显示和隐藏div，但是当点击时我无法很好地处理焦点我有一个反弹，因为焦点和点击同时。

这是我的代码

＆＃13;

$(function() {
  $('.myinput').click(function(e) {
    $('.text').addClass('hidden');
    console.log("click");
  });
  $('.myinput').focus(function() {
    $('.text').removeClass('hidden');
    console.log("focus");
  });
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <input class="myinput" type="text" />
  <div class="text">
    <div>TEXT TEXT TEXT</div>
    <div>TEXT TEXT TEXT</div>
    <div>TEXT TEXT TEXT</div>
  </div>
</div>

＆＃13;

Answer 1

我添加了一个变量来确定鼠标是否被按下，并且只显示文本内容。显示隐藏鼠标焦点文本的结果，显示制表符焦点文本。

还将点击处理程序更改为mousedown处理程序，单击事件仅在鼠标按下+鼠标向上时触发，从而导致闪烁问题。

codepen

var mousedown = false;

$(function () {
    $('.myinput').mousedown(function(e) {
      mousedown = true;
      $('.text').addClass('hidden');
      console.log("click");
    });
    $('.myinput').focus(function() {
      if(!mousedown) $('.text').removeClass('hidden');
      console.log("focus");
    });
});

$(window).mouseup(function(e){
  mousedown = false;
})

如何在点击和标签中处理焦点？

1 个答案: