Как программно отобразить самое левое содержимое элемента ввода HTML, когда текст длиннее, чем сам ввод в React
У меня есть элемент ввода, значение которого равно «abcdefghijklmnopqrstuvwxyz».
Я использовал ref, чтобы выделить содержимое от «n» до «z».
inputRef.current.setSelectionRange(18, 26);
что приводит к этому:
Как я могу вместо этого программно установить ввод?
Дополнительное понимание:
Если я переключусь на другую вкладку в браузере и вернусь на вкладку, содержащую этот ввод, это приведет к тому, что я хочу, но я не знаю, как заставить это работать с кодом.
Ответы 1
Теперь вы можете использовать атрибут Element.scrollLeft с достойной поддержкой браузера, вот Codesandbox: https://codesandbox.io/s/flamboyant-panini-02gr7l?file=/src/App.js
Я использовал тайм-ауты для настройки сценария, но ключевая часть находится здесь, и для этого требуется тайм-аут, так как он должен запускаться после вызова setSelectionRange.
setTimeout(() => (ref.current.scrollLeft = 0), 100);
Как и в случае с тайм-аутами в целом, требуемое время немного нестабильно.
ref.current.scrollLeft работает как шарм, спасибо!
Рассматривали ли вы возможность использования текстового поля?