輸入欄位上的onblur使彈出視窗不可點擊

    function showSuggestions(){
        let searchableModulesDiv = document.getElementById('searchableModules');
        searchableModulesDiv.classList.remove('d-none');
    }

    function hideSuggestions(){
        let searchableModulesDiv = document.getElementById('searchableModules');
        searchableModulesDiv.classList.add('d-none');
    }
    
    function filterSuggestions() {
        
    }

.prj-searchable-modules{
    position:fixed;
    margin-top: 70px;
    z-index: 2;
    width:100%;
}

.d-none {
    display: none;
}

<form id="searchBar" class="w-100 d-inline-flex">
    <!-- ... icons, labels, etc -->
    <input type="text" class="form-control" id="searchInput" placeholder="Module search..."
           onfocus="showSuggestions();" onblur="hideSuggestions();" onkeyup="filterSuggestions();">
</form>

<div id="searchableModules" class="card shadow-sm border-secondary rounded-3 prj-searchable-modules d-none">
  <ul class="nav flex-column">
    <li class="nav-item text-start">
      <a class="nav-link" href="calendar.html">
        <i class="fas fa-calendar-alt fa-fw"></i><span class="ps-3">Calendar</span></a>
    </li>
    <!-- ... more li items -->
  </ul>
</div>

我在我的網站上有一個快速搜索欄，點擊后會顯示一個可鏈接的串列。

我面臨的問題是點擊鏈接什么也不做，這是因為我認為一旦我點擊鏈接搜索欄就會失去焦點，所以實際的“點擊”發生在鏈接已經消失之后。

任何建議都值得贊賞，即使它是一種不同的方法（可能不使用外部插件）。

我目前正在使用 Bootstrap 5 和普通 JS。

uj5u.com熱心網友回復：

您可以使用setTimeout在單擊事件之后推遲隱藏。此外，如果您不想在單擊專案時隱藏串列，那么您可以簡單地為模糊添加條件。

function showSuggestions(){
        let searchableModulesDiv = document.getElementById('searchableModules');
        searchableModulesDiv.classList.remove('d-none');
    }

    function hideSuggestions(){
        setTimeout(() => {
            let searchableModulesDiv = document.getElementById('searchableModules');
            searchableModulesDiv.classList.add('d-none');
        }, 100);
    }
    
    function filterSuggestions() {
        
    }

.prj-searchable-modules{
    position:fixed;
    margin-top: 70px;
    z-index: 2;
    width:100%;
}

div.d-none > #searchableModules {
    display: none;
}

<form id="searchBar" class="w-100 d-inline-flex">
    <!-- ... icons, labels, etc -->
    <input type="text" class="form-control" id="searchInput" placeholder="Module search..."
           onfocus="showSuggestions();" onblur="hideSuggestions();" onkeyup="filterSuggestions();">
</form>

<div id="searchableModules" class="card shadow-sm border-secondary rounded-3 prj-searchable-modules" onclick="console.log('clicked'); hideSuggestions();">
  <ul class="nav flex-column">
    <li class="nav-item text-start">
      <a class="nav-link" href="#">
        <i class="fas fa-calendar-alt fa-fw"></i><span class="ps-3">Calendar</span></a>
    </li>
    <!-- ... more li items -->
  </ul>
</div>

uj5u.com熱心網友回復：

如果您將搜索欄和搜索模塊放在同一個父元素中，則可以只使用 CSS。

.search-ctr:focus-within #searchableModules {
    display:block;
}

#searchableModules {
    display: none;
}

<div class='search-ctr'>
    <form id="searchBar" class="w-100 d-inline-flex">
    <!-- ... icons, labels, etc -->
    <input type="text" class="form-control" id="searchInput"        placeholder="Module search..."
           onfocus="showSuggestions();" onblur="hideSuggestions();" onkeyup="filterSuggestions();">
</form>

<div id="searchableModules" class="card shadow-sm border-secondary rounded-3 prj-searchable-modules d-none">
  <ul class="nav flex-column">
    <li class="nav-item text-start">
      <a class="nav-link" href="calendar.html">
        <i class="fas fa-calendar-alt fa-fw"></i><span class="ps-3">Calendar</span></a>
    </li>
    <!-- ... more li items -->
  </ul>
</div>

標籤：javascript html css 输入 模糊

上一篇：如何在Angular中使用document.querySelectorAll獲取節點串列？

下一篇：當嘗試在javascript中將HTML元素的內容設定為表情符號時，它顯示奇怪的符號