How to hide a html element on mouse click only when not using it-CodePudding

I am creating an online file storage where user can create new files and folders in it. So I added two buttons to create files and folders. When one of the button is clicked, an input field appears to type a name for the file or folder. Usually the input field is hidden. When user clicks the button, input field is unhidden. Also I need to hide it again if the user clicks somewhere else in the page. Here is the code I've built so far.

<head>
<style>
    #divmain{
        display: flex;
        flex-direction: row;
    }
    #div1{
        background: antiquewhite;
        width: 30%;
        height: 800px;
        float: left;
    }
    #div2{
        background: black;
        width: 70%;
        height: 800px;
        float: right;
    }
    #input1{
        display:none;
        float:right;
        width:295px;
        height:44px;    
    }
   
</style>
</head>

<body onm ousedown="buttonclick1()">
    <h1>cloud file directory</h1><br>

    <div id="divmain">

        <script>        
        function buttonclick1(){
            document.getElementById("input1").style.display="none"
        }        
        </script>

        <div id="div1">
            <button style="height:44px;width:50px;float:left;" onclick="document.getElementById('input1').style.display='block'"><a>Folder</a></button>
            <button style="height:44px;width:50px;float:left;" onclick="document.getElementById('input1').style.display='block'"><a>File</a></button>
            <input id="input1" type="text"><br><br>
            <hr style="border-top: 2px solid;">
        </div> 

        <div id="div2">  
        </div>  
    </div>    
</body>

Two buttons are added in div1. I've used a javascript function hide the input field when a mouse click is detected. The code so far is working.

But the problem is, it hides the input field even the mouse click was done in the input field. I need it to be hidden for mouse clicks only outside the input field. I tried using mouseover. But don't know how to apply it to here. Is there any way to do that?

CodePudding user response：

First, we need an event object which has the details regarding the click event. Then we use it to determine whether we should hide/show the input field.

We need to filter out the events based on the element on which the click was made. Here we can use the id of the input field to differentiate it from the other clicks. The target object contains the details of the element from which the event originated.

Using this it is easy to identify the source element.

<head>
<style>
    #divmain{
        display: flex;
        flex-direction: row;
    }
    #div1{
        background: antiquewhite;
        width: 30%;
        height: 800px;
        float: left;
    }
    #div2{
        background: black;
        width: 70%;
        height: 800px;
        float: right;
    }
    #input1{
        display:none;
        float:right;
        width:295px;
        height:44px;    
    }
   
</style>
</head>

<body onm ousedown="buttonclick1(event)">
    <h1>cloud file directory</h1><br>

    <div id="divmain">

        <script>        
        function buttonclick1(e){
       if(e.target.id !== 'input1')
            document.getElementById("input1").style.display="none"
        }        
        </script>

        <div id="div1">
            <button style="height:44px;width:50px;float:left;" onclick="document.getElementById('input1').style.display='block'"><a>Folder</a></button>
            <button style="height:44px;width:50px;float:left;" onclick="document.getElementById('input1').style.display='block'"><a>File</a></button>
            <input id="input1" type="text"><br><br>
            <hr style="border-top: 2px solid;">
        </div> 

        <div id="div2">  
        </div>  
    </div>    
</body>

CodePudding user response：

you can listen to onblur https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur this event is fired when element lost focus