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

i have text field within in div. in case width of text field more width of div. have used overflow: hidden div(ui modification not possible now). have 'clear' button clear text field.

now issue facing is,

1. type long string in text field.

2. now click on clear button clear text.

3. now when type again, find first character hidden ui. later when press home able see complete text. in chrome works fine guess , found issue in firefox.

here 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 way can fix it, please help.

your div has 150px , input 250px, overflow cut input, why see :

but when type more characters input browser best display text typing in, , pushes input so.

on clear doing $("#fname").val(""); there nothing instructs browser reposition input, browser keeps ui input unchanged.

so retest need reposition input in overflow:hidden container.

for example, set width of input smaller container , set original value:

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

<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">