CODEWITHSUNDEEP
javascriptjqueryreactjs
sak
sak

Reputation: 3307

How to preserve cursor position on textarea text change?

I'm trying to implement a textarea which automatcally inserts close parens in React, but whenever I modify the textarea's value property, the cursor jumps to the end of the text being edited.

Here's my onChange function:

    //on change
    function(event) {

        var newText =  event.target.value

        var cursorPosition = getCursorPosition(event.target)
        if(lastCharacterWasParen(newText, cursorPosition)){
            newText = newText.slice(0, cursorPosition) + ')' + newText.slice(cursorPosition)
        }

        this.setProps({text: newText}})

    }

This successfully inserts the paren, but how do I preserve the cursor position?

Upvotes: 6

Views: 5793

Answers (2)

borisano
borisano

Reputation: 1386

You can use selectionStart prop as described here to store and then reset cursor position

var cursorPosition = $('#myTextarea').prop("selectionStart");

Then use something like this to set cursor position

Upvotes: 2

Surely
Surely

Reputation: 1709

I am doing similar things before.

The way to change the cursor position is using: evt.target.selectionEnd

In your case, you can record down the selectionEnd before inserting, and after inserting, set the selectionEnd to the position it should be.

Upvotes: 2

Related Questions