0
277
VistasCómo mostrar programáticamente el contenido más a la izquierda del elemento de entrada HTML cuando el texto es más largo que la propia entrada en React
Tengo un elemento de entrada cuyo valor es 'abcdefghijklmnopqrstuvwxyz'
Usé ref para resaltar el contenido de 'n' a 'z'
inputRef.current.setSelectionRange(18, 26);que resultan en esto:
¿Cómo puedo configurar programáticamente la entrada a esto en su lugar?
Información adicional:
Si cambio a otra pestaña en el navegador y vuelvo a la pestaña que contiene esta entrada, obtendrá lo que quiero, pero no sé cómo hacer que funcione con el código.
1 Respuestas
Responde la pregunta0
Puede usar el atributo Element.scrollLeft con soporte de navegador decente ahora, aquí hay un Codesandbox: https://codesandbox.io/s/flamboyant-panini-02gr7l?file=/src/App.js
He usado tiempos de espera para configurar el escenario, pero la parte clave está aquí y requiere un tiempo de espera, ya que debe activarse después de la llamada setSelectionRange .
setTimeout(() => (ref.current.scrollLeft = 0), 100);Al igual que con los tiempos de espera en general, el tiempo requerido es un poco irregular.