JavaScriptonfocusout事件洗掉了無法執行其代碼的按鈕，因為當我單擊它時焦點已洗掉-有解無憂

我正在嘗試使用下拉搜索實作文本欄位。下拉專案是具有display: noneCSS 屬性的 div 內的按鈕。當我單擊它時，文本欄位應將其內容更改為按鈕的內容。

問題是當焦點從文本欄位中移除時下拉選單應該消失。...并且當我單擊一個下拉專案時，焦點被移除，按鈕消失并且它onclick沒有被執行。是否可以在執行洗掉此按鈕的代碼之前執行選擇名稱的按鈕代碼？

代碼：

<!DOCTYPE html>
<html>
<style>
#resident_name_inp:focus {outline: 3px solid #ddd;}

.dd {
  position: relative;
  display: inline-block;
}

.dd-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  overflow: auto;
  width: 100%;
  border: 1px solid #ddd;
  z-index: 1;
}

.dd-content button {
  background-color: #ffffff;
  width: 100%;
  padding-left: 4px;
  border: none;
  display: block;
}

.dd-content button:hover {
  background-color: #ddd;
}

</style>
<body>
  <div class="dd">
    <input
      id="name_inp"
      type="text"
      placeholder="Search Names..."
      onfocus="showNames()"
      onfocusout="hideNames()">
    <div id="dropdown_names" class="dd-content">
      <button type="button" onclick="selectName('alex')">alex</button>
      <button type="button" onclick="selectName('jake')">jake</button>
      <button type="button" onclick="selecttName('evgen')">evgen</button>
    </div>
  </div>
</body>

<script>
function showNames() {
  document.getElementById("dropdown_names").style.display = 'block'
}

function hideNames() {
  document.getElementById("dropdown_names").style.display = 'none'
}

function selectName(name) {
  document.getElementById("name_inp").value = name
}
</script>
</html>

uj5u.com熱心網友回復：

您可以使用relatedTarget 檢查您是否單擊了與輸入相關的按鈕元素。這是要編輯的內容：

function hideNames() {
  if(event.relatedTarget != null){
    if(event.relatedTarget.tagName == 'BUTTON'){
      return
    }
  }
    document.getElementById("dropdown_names").style.display = 'none'
}

function selectName(name) {
  document.getElementById("name_inp").value = name
  document.getElementById("dropdown_names").style.display = 'none'
}

uj5u.com熱心網友回復：

使用箭頭函式、三元運算子的 ES6 解決方案適用于多個下拉選單，并且 JS 中有很多注釋來解釋正在發生的事情。

還重新設計了樣式以使用 CSS 網格。

/* Get array of all .dd elements */
const dropdowns = Array.from(document.getElementsByClassName('dd'));

/*For each .dd element */
dropdowns.forEach(dropdown => {
  const input = dropdown.firstElementChild;
  const names = dropdown.lastElementChild;

  /* Add click event listener to <input> of .dd */
  input.addEventListener('click', () => {
    /* Ternary to toggle .show */
    dropdown.classList.contains('show')
      ? dropdown.classList.remove('show')
      : dropdown.classList.add('show')
  });

  /* For each button in .dd-content */
  Array.from(names.children).forEach(option => {
    /* Add click event listener button */
    option.addEventListener('click', () => {
      /* Set input value to button value */
      input.value = option.innerHTML;

      /* Remove .show class from dropdown */
      dropdown.classList.remove('show');
    })
  });
});

.dd { display: grid }

.dd input { text-align: center }
.dd input { cursor: s-resize } .dd.show input { cursor: n-resize }

.dd .dd-content {
  grid-row-start: 2;
  border: 1px solid #ddd;
  display: none;
}
.dd.show .dd-content { display: block }

.dd .dd-content button {
  background-color: #ffffff;
  width: 100%;
  padding-left: 4px;
  border: none;
  display: block;
}

.dd .dd-content button:hover { background-color: #ddd }

<div class="dd">
  <input type="text" placeholder="Search Names...">
  <div class="dd-content">
    <button type="button">alex</button>
    <button type="button">jake</button>
    <button type="button">evgen</button>
  </div>
</div>

<hr>

<div class="dd">
  <input type="text" placeholder="Some Thing Else">
  <div class="dd-content">
    <button type="button">Some</button>
    <button type="button">Thing</button>
    <button type="button">Else</button>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/490699.html

標籤：javascript html css 落下

上一篇：如何撰寫一個接受用戶物件并回傳鍵值的函式？

下一篇：對未排序陣列中最大的n個數求和