0
251
VistasCómo detectar el mouseover de la lista de autocompletar y ocultar el intervalo del marcador de posición
Tengo un span en lugar de un plaseholder de posición. Cuando paso el mouse sobre los elementos en la lista de autocompletar, también quiero ocultar el marcador de posición de lapso al mismo tiempo, como el marcador de posición predeterminado.
form { margin: 0 auto; width: 100%; text-align: center; } form input { position: absolute; font-size: 16px; height: 100%; display: block; background: transparent; border: none; margin: 0; outline: none; width: calc(100% - 10px); top: 0; left: 0; padding: 0px 5px; } div.inputs_div { position: relative; width: 200px; height: 22px; display: block; background: #fff; padding: 5px 5px; border: 1px solid black; } span.placeholder { position: absolute; top: 50%; left: 5px; transform: translateY(-50%); display: block; font-size: 16px; pointer-events: none; } <form> <div class="inputs_div"> <input type="text" name="username" /> <span class="placeholder">User Name</span> </div> </form>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede usar input y verificar si input está vacía o no, en caso yes , elimine el text ; de lo contrario, muestre el text
Aquí se usa la propiedad
displayque puede usar de acuerdo con preferencias comovisibility,color: white
Será una respuesta directa si proporcionó el código de autocompletar, pero puede usar el
focusdeinputpara activar y verificar siinputestá completa o no.
function toogleText() { var text = document.getElementById("placeholder1"); var inputDemo = document.getElementById("inputDemo").value; if (inputDemo != "") { text.style.display = "none"; } else { text.style.display = "block"; } } document.getElementById("inputDemo").addEventListener("input", toogleText) form { margin: 0 auto; width: 100%; text-align: center; } form input { position: absolute; font-size: 16px; height: 100%; display: block; background: transparent; border: none; margin: 0; outline: none; width: calc(100% - 10px); top: 0; left: 0; padding: 0px 5px; } div.inputs_div { position: relative; width: 200px; height: 22px; display: block; background: #fff; padding: 5px 5px; border: 1px solid black; } span.placeholder { position: absolute; top: 50%; left: 5px; transform: translateY(-50%); display: block; font-size: 16px; pointer-events: none; } <form> <div class="inputs_div"> <input type="text" name="username" id="inputDemo" /> <span class="placeholder" id="placeholder1">User Name</span> </div> </form>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta