How to add user input at caret position?

I am facing a weird issue regarding a textbox.Lets say I enter some text in it.Now if I change the caret position in between the already entered text and try to add text there, the caret automatically jumps to the end of the text. How can I avoid this?

Any help is really appreciated.

Textbox :-

 <div class="form-group">
    <label data-i18n="rpt_name"></label>
          <span class="required">*</span>
    <input type="text" class="form-control" id="subNameID">
 </div>

via Chebli Mohamed