如何在用户点击其下方时隐藏下拉列表

Question

下面是我正在使用的输入下拉列表的简化版本.

它的作用的基本概要是:如果您专注于输入,则会出现一个下拉列表.如果单击下拉列表中的某个选项,该选项将填充输入并且下拉列表将消失.这是使用取得了onfocus和功能我叫dropdown();和undropdown();.

我处于两难境地,当有人点击其他地方时,我无法让下拉消失.如果我使用onblur它,它会成功隐藏下拉列表,但如果你单击一个选项它不会填充输入,这是因为,该onblur函数首先运行,因此,该input();函数不会运行,因为下拉列表已经隐藏.

如果你onclick在body标签或其他父标签上放置一个,它会认为onfocus是一个click,它运行的是dropdown();函数,然后是undropdown();函数,因此函数重叠后永远不会出现下拉列表.

我很感激帮助找出如何订购功能,以便它们以正确的顺序执行而不会相互重叠.

JSFiddle 在这里可用.

function input(pos) {
  var dropdown = document.getElementsByClassName('drop');
  var li = dropdown[0].getElementsByTagName("li");
  document.getElementsByTagName('input')[0].value = li[pos].innerHTML;
  undropdown(0);
}
function dropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display = "block"
}
function undropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display = "none";
}

.drop {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: visible;
}
.content {
  display: none;
  list-style-type: none;
  border: 1px solid #000;
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 2;
  width: 100%;
  max-height: 190px;
  overflow-y: scroll;
}
.content li {
  padding: 12px 16px;
  display: block;
  margin: 0;
}

<div class="drop">
  <input type="text" name="class" placeholder="Class" onfocus="dropdown(0)"/>
  <ul class="content">
    <li onclick="input(0)">Option 1</li>
    <li onclick="input(1)">Option 2</li>
    <li onclick="input(2)">Option 3</li>
    <li onclick="input(3)">Option 4</li>
  </ul>
</div>

PS:除了上述问题之外,我还是希望有关编辑的建议,以便为这个问题获得更好的标题,以便遇到类似问题的人可以更容易地找到它.

Answer 1

在这种情况下，onblur您可以调用一个函数，该函数undropdown(0);几乎立即在非常小的 setTimeout 之后触发。像这样：

function set() {
  setTimeout(function(){ 
    undropdown(0);
  }, 100);
}

HTML

<input type="text" name="class" placeholder="Class" onfocus="dropdown(0)" onblur="set()" />

不需要其他更改。

function set() {
  setTimeout(function(){ 
    undropdown(0);
  }, 100);
}

<input type="text" name="class" placeholder="Class" onfocus="dropdown(0)" onblur="set()" />

function input(pos) {
  var dropdown = document.getElementsByClassName('drop');
  var li = dropdown[0].getElementsByTagName("li");

  document.getElementsByTagName('input')[0].value = li[pos].innerHTML;
  undropdown(0);
}

function dropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display= "block"
}

function undropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display= "none";
}

function set() {
  setTimeout(function(){ 
    undropdown(0);
  }, 100);
}

Answer 2

你能与下拉可获得焦点tabindex，并在输入的blur事件监听器只隐藏下拉如果焦点没有去下拉（见当的onblur时，我怎么能找出哪些元素焦点就到？）

<ul class="content" tabindex="-1"></ul>

input.addEventListener('blur', function(e) {
  if(!e.relatedTarget || !e.relatedTarget.classList.contains('content')) {
    undropdown(0);
  }
});

function input(e) {
  var dropdown = document.getElementsByClassName('drop');
  var li = dropdown[0].getElementsByTagName("li");
  document.getElementsByTagName('input')[0].value = e.target.textContent;
  undropdown(0);
}
[].forEach.call(document.getElementsByTagName('li'), function(el) {
  el.addEventListener('click', input);
});
function dropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display = "block"
}
function undropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display = "none";
}
var input = document.getElementsByTagName('input')[0];
input.addEventListener('focus', function(e) {
  dropdown(0);
});
input.addEventListener('blur', function(e) {
  if(!e.relatedTarget || !e.relatedTarget.classList.contains('content')) {
    undropdown(0);
  }
});

.drop {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: visible;
}
.content {
  display: none;
  list-style-type: none;
  border: 1px solid #000;
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 2;
  width: 100%;
  max-height: 190px;
  overflow-y: scroll;
  outline: none;
}
.content li {
  padding: 12px 16px;
  display: block;
  margin: 0;
}

<div class="drop">
  <input type="text" name="class" placeholder="Class" />
  <ul class="content" tabindex="-1">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
  </ul>
</div>