javascript - How to preserve cursor position on textarea text change? - Stack Overflow

admin管理员组

文章数量:1391934

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?

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?

• javascript
• jquery
• reactjs

Share Improve this question Follow edited May 6, 2015 at 16:12 Huangism 16.4k77 gold badges5050 silver badges7575 bronze badges asked May 6, 2015 at 16:07 saksak 3,32711 gold badge3434 silver badges7373 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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.

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

本文标签： javascriptHow to preserve cursor position on textarea text changeStack Overflow