Tengo un campo de entrada para el que no puedo usar un marcador de posición, sino que debo usar una etiqueta y colocarlo como si fuera un marcador de posición, justo en el campo. ¿Cómo puedo ocultar la etiqueta cuando comienza a escribir en el campo y hacer que la etiqueta vuelva a aparecer cuando todas las letras se eliminen del campo, tal como debería comportarse el marcador de posición?
Mi html:
<label class="PR_label" for="PR">My label</label> <input type="hidden" name="PR" value="" id="TR">EDITAR: Me di cuenta de que esto no es posible ya que mi campo de entrada está oculto y no puede ingresar/escribir nada ya que, para empezar, no hay ningún archivo.
Si desea usar su etiqueta como marcador de posición en su campo de entrada, puede usar la posición CSS.
* { box-sizing: border-box; } .form-control { width:50%; padding: 0.625rem; position: relative; } label { position: absolute; top: 1.7rem; right: 1.625rem; color: blue; } input[type="text"] { display: block; width: 100%; padding: 1rem; } <div class="form-control"> <label class="PR_label" for="PR">test</label> <input type="text" name="PR" value="a" id="TR"> </div>HTML:
<div class='wrapper'> <label class="PR_label" for="PR">My label</label> <input type="hidden" name="PR" value="" id="TR"> </div>Si planea volver a hacerlo visible:
const labelElement = document.querySelector('.PR_label') const inputElement = document.querySelector('input') inputElement.addEventListener('keydown', () => { labelElement.style.display = 'none' })Si planea no volver a hacerlo visible:
const labelElement = document.querySelector('.PR_label') const inputElement = document.querySelector('input') inputElement.addEventListener('keydown', () => { labelElement.remove() })CSS:
.wrapper { display: grid; grid-template: 1fr / 1fr; } input, .PR_label { grid-row: 1; grid-column: 1; }Puede colocar la etiqueta dentro del cuadro de texto usando position: absolute; y luego oculte la etiqueta cuando el usuario escriba, usando un detector de eventos:
var textbox = document.getElementById("input_box") var label = document.getElementById("label") textbox.addEventListener("keydown", function() { label.style.display = "none" }, false); #input_box { position: absolute; top: 0; left: 0px; } #label { position: absolute; top: 0; left: 0px; } <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <input value="" id="input_box"> <label id="label">Lorem ipsum</label> <script src="code.js"></script> </body> </html>