Html 如何设置输入视图始终为值的结尾

我试图将输入的默认视图设置为始终位于值的末尾
例如，我输入了宽度为196px的文本，并输入了长度超过此输入字段长度的长值：

当我离开光标（onBlur）时，视图返回到输入字段的开头：

但是当光标离开字段时，我希望看到字段的结尾（也希望不断更新）
我试过：

由于我添加了这个onBlur（）函数，我仍然可以在单击输入字段外部时键入，但是这个输入的视图仍然是我在开始时输入的这么长的文本

---

如何设置输入视图始终以值结尾…？

如果您使用的是输入，并且您知道预期值超过了宽度-那么文本输入是错误的作业工具-您应该使用允许更长值的文本区域，并允许换行，让用户看到输入的完整文本。这是一个可访问性问题——更不用说故意使用不允许可视化预期值的输入的设计问题了。当然，有时任何输入都不会显示完整值，但黄金法则是将输入大小调整为预期长度加上缓冲区。如果这还不够长-使用文本区域是的，这是一个很好的观点。

const field = React.useRef(null);

...

<input
  ref={field}
  onBlur={onBlur}
  ...
/>

function onBlur() {
  field.current.focus();
}