javascript - 阻止 split 失去焦点

我有一个附加到带有 id 关键字的输入标签的自动完成功能。自动完成的结果在带有 id 结果的分区和带有类项的分区内的每个结果项中可见。
这是 HTML 标记:

<input name='institute' type="text" placeholder="Start typing.."id="keyword">
<div id="results">
    <div class="item"><p>Item 1</p></div>
    <div class="item"><p>Item 2</p></div>
    <div class="item"><p>Item 3</p></div>
</div>

除法结果具有固定高度。这是CSS:

width:80%;
height: 200px;
overflow-y: auto;

这是我与我的问题相关的 jquery 部分

$("#keyword").blur(function() {
    $("#results").fadeOut(500);
  })
  .focus(function() {
    $("#results").show();
  });

现在，每当结果的高度超过 200px 时就会出现问题。我得到了一个滚动条，但是每当我点击滚动条时，输入标签关键字就会失去焦点并且除法结果逐渐消失。我想在使用滚动时保留除法结果，并且仅在选择元素后才使其淡化。我如何解决它？

最佳答案

有趣的问题，也是在 Chrome 和 IE 中工作的真正挑战:

var canBlur= true;

$('#results')
  .mousedown(function(event) {
    canBlur= event.target.id !== 'results';
  })

$(document)
  .mousemove(function() {
    if(!canBlur) {
      $('#keyword').focus();
    }
    canBlur= true;
  });

$('#keyword')
  .blur(function(event) {
    if(canBlur) {
      $('#results').fadeOut(500);
    }
  })
  .focus(function() {
    $('#results').fadeIn(0);
  })

Fiddle

关于javascript - 阻止 split 失去焦点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30765358/