Javascript 如何将光标位置设置为文本字段的初始位置？

我在一个div中有一个文本字段。在我的例子中，文本字段的宽度大于div的宽度。因此我对div使用了

overflow:hidden

（现在无法修改UI）。我还有一个“清除”按钮，可以清除文本字段

现在我面临的问题是,

在文本字段中键入一个长字符串

现在单击“清除”按钮以清除文本

现在，当您再次键入某些内容时，您会发现第一个字符在UI中是隐藏的。但稍后按

Home

时，您将能够看到完整的文本。在Chrome中，它运行良好，我想，我在firefox中发现了这个问题

这是一个简单的例子

$（'#but'）。在（“单击”，函数（）{
$（“#fname”）.val（“”）；
});
您可以在清除字段后设置焦点，然后光标将被设置到初始位置

试试这个：

$('#but').on("click", function() {
  $("#fname").val("");
  $("#fname").focus();
});

您的div具有150px和250px的输入，因此它将从输入中切断溢出，这就是为什么您会看到：


但是，当您在输入中键入更多字符时，浏览器将尽最大努力显示您正在键入的文本，并推动输入来执行此操作


通过执行
$（“#fname”）.val（“”）清除时没有任何东西指示浏览器重新定位输入，因此浏览器保持输入的UI不变


因此，要完全重新测试它，您需要在
溢出：隐藏的
容器中重新定位输入

例如，将输入的宽度设置为小于容器的宽度，然后将其设置回原始值：


$（'#but'）。在（“单击”，函数（）{
$（“#fname”）.val（“”）；
$（“#fname”）.width（0）；//将宽度设置为小于容器
//缓和
setTimeout（函数（）{
$（“#fname”）.width（250）；//将宽度设置为原始值
}, 50);
});

当您输入比输入长的文本，然后单击“清除”按钮时，输入不会重新定位。我想他也想将输入重新定位到原始状态。不工作。这与我解释的问题相同。现在试试，我增加了更长的重置时间：延迟10毫秒，而不是通常的0毫秒。我重新测试过，有时有效，50毫秒延迟时间100%