How to set the cursor position to initial position of a text field?

I have a text field within in a div. In my case the width of the text field is more than the width of the div. So I have used overflow: hidden for the div(UI modification not possible now). I have also a ‘Clear’ button which will clear the text field.

Now the issue i am facing is,

  1. Type a long string in the text field.

  2. Now click on the clear button to clear the text.

  3. Now when you will type something again, you will find that the first character is hidden from the UI. But later when you press Home you will be able to see the complete text. In Chrome it works fine I guess , i found the issue in firefox.

Here is the simple example,

$('#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">

Is there any way I can fix it, please help.


Source: css

Leave a Reply