javascript - 自动隐藏搜索框

Question

当单击右上角输入框时，会出现一个用于搜索位置的白色框。我的问题是搜索位置后一切正常，但白色框不会自动关闭...代码是HERE

    function myFunction() {
      document.getElementById("myText").disabled = true;
    }
    
    if ( $(window).width() >= 739) {      
      function openNav() {
      document.getElementById("mySidenav").style.width = "500px";
      document.getElementById("overlay-layer").style.opacity = "1";
      document.getElementById("overlay-layer").style.display = "block";
      }
    
    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("overlay-layer").style.opacity = "0";
      document.getElementById("overlay-layer").style.display = "none";
    }
    
    function closeBox(){
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("overlay-layer").style.opacity = "0";
      document.getElementById("overlay-layer").style.display = "none";
    }
    } 
    
    
    
    else {
    	function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
      document.getElementById("overlay-layer").style.opacity = "1";
      document.getElementById("overlay-layer").style.display = "block";
      }
    
    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("overlay-layer").style.opacity = "0";
      document.getElementById("overlay-layer").style.display = "none";
    }
    
    function closeBox(){
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("overlay-layer").style.opacity = "0";
      document.getElementById("overlay-layer").style.display = "none";
    }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="mySidenav" class="sidenav" onblur="closebox()">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <input type="text" id="myText" name="myText" placeholder="Street Address, city, state" class="search-box"
                   autocomplete="off" onchange="javascript:SearchLocations();">
            <span class="get-location" onclick="getLocation(); return false">
                <img src="https://img.icons8.com/wired/64/000000/define-location.png">
                <!--<i class="fa fa-bullseye"></i>-->
                <div>Get Current Location <strong>Using GPS</strong></div>
            </span>
        </span>

这是我用来打开和关闭白盒的脚本..我添加了我使用过的html js n css..

Answer 1

您可以使用事件触发器(onblur 或 onchange)并在触发时隐藏元素

类似的东西

<ELEMENT id="mySidenav" onblur="closebox()">...</ELEMENT>

如果我有 mySidenav 元素、CSS 和有效的 Java 脚本来查看您网站上的当前行为，我将能够进一步提供帮助并改进我的答案。