Estoy creando un almacenamiento de archivos en línea donde el usuario puede crear nuevos archivos y carpetas en él. Así que agregué dos botones para crear archivos y carpetas. Cuando se hace clic en uno de los botones, aparece un campo de entrada para escribir un nombre para el archivo o la carpeta. Por lo general, el campo de entrada está oculto. Cuando el usuario hace clic en el botón, el campo de entrada se muestra. También necesito ocultarlo nuevamente si el usuario hace clic en otro lugar de la página. Aquí está el código que he construido hasta ahora.
<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 onmousedown="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>Se agregan dos botones en div1. He usado una función de javascript para ocultar el campo de entrada cuando se detecta un clic del mouse. El código hasta ahora está funcionando.
Pero el problema es que oculta el campo de entrada incluso si se hizo clic con el mouse en el campo de entrada. Necesito que esté oculto para los clics del mouse solo fuera del campo de entrada. Intenté usar mouseover . Pero no sé cómo aplicarlo aquí. ¿Hay alguna manera de hacerlo?
Primero, necesitamos un objeto de event que tenga los detalles sobre el evento de clic. Luego lo usamos para determinar si debemos ocultar/mostrar el campo de entrada.
Necesitamos filtrar los eventos según el elemento en el que se hizo clic. Aquí podemos usar la id del campo de entrada para diferenciarlo de los otros clics. El objeto de target contiene los detalles del elemento a partir del cual se originó el evento.
Usando esto, es fácil identificar el elemento fuente.
<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 onmousedown="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>puede escuchar onblur https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur este evento se activa cuando el elemento pierde el foco