En el caso de la entrada, cada vez que nos enfocamos o hacemos clic fuera del campo de entrada, vemos que la parte derecha del texto superior está oculta y solo se muestra la parte izquierda, pero quiero lo contrario.
<input value="abcdefghijklmnopqrstwxyz123456789">Al igual que en el campo de entrada anterior, podemos ver "abcdefghijklmnopqrstwxyz1" y el resto ("23456789") está oculto, pero quiero mostrar "klmnopqrstwxyz123456789" (última parte en lugar de la primera) y ocultar la primera parte "abcdefghij" sin CSS dirección.
A través de javascript, podemos lograrlo con la ayuda del evento de desenfoque .
En el desenfoque, capturamos el Element.scrollLeft actual de la entrada. A continuación, restablecemos la posición scrollLeft a Element.scrollWidth envuelto en un setTimeout() para garantizar que el navegador espere para procesar el cambio en cola.
const elem = document.getElementById('data'); elem.addEventListener("blur", () => { setTimeout(() => { elem.scrollLeft = elem.scrollWidth; }, 0); }); <input id="data" value="abcdefghijklmnopqrstwxyz123456789">Debajo del código: para cambiar dinámicamente la longitud de su texto al cambiar el contenido
function a (t){ t.size = t.value.length console.log(t) } <input onkeyup="a(this)" value="abcdefghijklmnopqrstwxyz123456789">