¿Cómo puedo dejar el marcador de posición cuando empiezo a escribir y simplemente se extiende hacia adelante?
como cuando escribo 100 espacios e INX
100 INX
para que cuando escriba 100. INX avance y la entrada completa se convierta en
100 INX
<!DOCTYPE html> <html> <body> <h1>Extend placeholder forward</h1> <input type="text" id="left" name="left" oninput="right.value = left.value; return true;" placeholder="INX"/> <input type="text" id="right" name="right" oninput="left.value = right.value; return true;" placeholder="INX" disabled /> </body> </html>No, no puede modificar el comportamiento de un marcador de posición nativo.
Una especie de solución alternativa con posicionamiento, pseudo elementos y variables css:
document.querySelector('#left').addEventListener('input', function() { this.parentElement.style.setProperty('--val', "'"+this.value+"'"); document.querySelector('#right').value = this.value ? this.value + ' INX' : ''; }); #div1, #div2 { position: relative; display: block; width: fit-content; width: -moz-fit-content; --val: ''; font-family: sans-serif; font-size: 14px; } #div1::after { content: var(--val) ' INX'; position: absolute; left: 3px; top: 1px; bottom: 1px; pointer-events: none; line-height: 20px; } #left, #right { font-family: inherit; font-size: inherit; caret-color: black; } #left { color: transparent; } <h1>Extend placeholder forward</h1> <div id="div1"><input type="text" id="left" name="left" maxlength="18" /></div> <div id="div2"><input type="text" id="right" name="right" placeholder="INX" disabled /></div>Es complicado hacer cosas con un elemento de entrada; por ejemplo, no puede adjuntar pseudoelementos.
Tomando un enfoque ligeramente diferente, si en lugar de la entrada usa un div editable por contenido, puede adjuntar un elemento posterior con el INX como contenido y se moverá por delante de la entrada real a medida que el usuario escribe:
div { display: inline-block; width: auto; border: 1px solid black; border-radius: 5px; background: #eeeeee; padding: 5px; } div::after { content: ' INX'; } <div contenteditable></div>