0

I've got an input field(using redux-form):

 <input
                {...input}
                autoFocus
                onFocus={(e)=> {
                    var val = e.target.value;
                    e.target.value = '';
                    e.target.value = val;
                    }}
                className={'hinput'}
                value={input.value}/>

When the input is focused, it starts typing from the position where you click(right or left from the value). How to force user to start typing from the beginning when the input is focused?

The wrong behavior:

enter image description here

I tried to use the function onFocus and try to e.target.value='' to reset the value so it will go to the beginning, but it does not work. Thanks in advance

terrymorse
  • 6,771
  • 1
  • 21
  • 27
Konstantin
  • 129
  • 4
  • 16
  • Does this answer your question? [HTML Textarea: is it possible to change cursor position?](https://stackoverflow.com/questions/6141391/html-textarea-is-it-possible-to-change-cursor-position) – r3wt May 08 '20 at 20:52

1 Answers1

3

I think the function you need to move the selection point is HTMLInputElement.setSelectionRange().

onClick={(e)=> {
  e.target.setSelectionRange(0, 0);
}}


function handleClick (input) {
  console.log('handleClick()');
  input.setSelectionRange(0, 0);
}
Click on input:<br/>
<input value="35.00" onclick="handleClick(this);" />
terrymorse
  • 6,771
  • 1
  • 21
  • 27