how to move cursor/caret to end of input when clicked in react

user_13443383 0
Viewed 505

When the input is selected and a user has typed in it, currently if the click back on their text the cursor jumps to where they clicked. any letters typed after this appear where the cursor clicked.

what i'm trying to achieve is, when a user clicks anywhere in the input I want to have the cursor jump to the end of the input's text.

I'm using react and the react-autosize-input package.

Thanks

reactjs forms input html javascript
1 Answers

You can set the cursor position with HTMLInputElement.setSelectionRange() and with the input value length.

  const handleClick = (event) => {
     const {value} = event.target;
     const position = value.length;
     event.target.setSelectionRange(position, position);
  }
user_143498080
Related