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

Question

我在div中有一个文本字段。在我的例子中，文本字段的宽度大于div的宽度。所以我使用overflow: hidden作为div（现在不可能进行UI修改）。我还有一个“清除”按钮，它将清除文本字段。

现在我面临的问题是，

1. 在文本字段中输入长字符串。

2. 现在点击清除按钮清除文字。

3. 现在，当您再次输入内容时，您会发现UI中隐藏了第一个字符。但是稍后当您按Home时，您将能够看到完整的文字。在Chrome中我的工作正常，我在firefox中找到了这个问题。

这是一个简单的例子，

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maindiv" style="width:100px; overflow: hidden;border: 2px solid black; margin:20px">
  <input type="text" id="fname" style="width: 250px;border: 5px solid red;">
</div>
<input type="button" id="but" value="clear">

我有什么方法可以解决它，请帮忙。

Answer 1

你的div有150px而输入是250px，所以它会从输入中切掉溢出，这就是你看到的原因：

但是当您在输入中键入更多字符时，浏览器将尽最大努力显示您正在输入的文本，并按下输入。

通过执行$("#fname").val("");清除时，没有任何内容指示浏览器重新定位输入，因此浏览器会保持输入的UI不变。

因此，要完全重新测试，您需要在overflow:hidden容器中重新定位输入。

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

＆＃13;

＆＃13;

$('#but').on("click", function() {
  $("#fname").val("");
  $("#fname").width(0); // setting the width smaller then the container 
  // deffer
  setTimeout(function (){
    $("#fname").width(250); // setting the width to original value
  }, 50);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maindiv" style="width:100px; overflow: hidden;border: 2px solid black; margin:20px">
  <input type="text" id="fname" style="width: 250px;border: 5px solid red;">
</div>
<input type="button" id="but" value="clear">

＆＃13;

＆＃13;

＆＃13;

Answer 2

清除字段后可以设置焦点，然后光标将设置为初始位置。

试试这个：

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

http://jsfiddle.net/yk48hoqm/