如何在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設置為它應該的位置。

Answer 2

您可以使用此處所述的selectionStart prop來存儲然后重置光標位置

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

然后使用類似這樣來設置光標位置