У меня есть компонент React, который инкапсулирует входной тег html. Поведение по умолчанию для тега ввода - если символы больше, чем то, что может отображать ввод, мы можем прокрутить влево и вправо с помощью невидимой прокрутки (например, я набираю John Smitheens для размера 11).
Я хочу изменить отображение на Джон Смит ... если вход не сфокусирован (не нажат).
Я не знаю размер или количество символов, которые я хочу ограничить заранее, потому что компонент React используется во многих местах, а размер зависит от родительского компонента (ширина: 100%). Есть ли способ получить размер ввода или узнать, когда символы превышают ширину ввода? Спасибо
<!DOCTYPE html>
<html>
<body>
<input placeholder="Search User" type="text" size="11">
</body>
</html>