如何在textarea文本更改时保留光标位置？

Question

我正在尝试实现一个textarea,它自动在React中插入紧密的parens,但每当我修改textarea的value属性时,光标会跳转到正在编辑的文本的末尾.

这是我的onChange函数:

    //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}})

    }

这成功插入了paren,但如何保留光标位置？

Answer 1

我以前也在做类似的事情。

改变光标位置的方法是使用：evt.target.selectionEnd

在你的情况下，你可以在插入之前记录下selectionEnd，并在插入之后将selectionEnd设置到它应该在的位置。