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

Posted 2023-05-07

【中文标题】如何在 textarea 文本更改上保留光标位置？

【英文标题】：How to preserve cursor position on textarea text change?

【发布时间】：2015-07-16 21:38:40

【问题描述】：

我正在尝试实现一个 textarea，它会在 React 中自动插入右括号，但是每当我修改 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)

    

这成功插入了括号，但是如何保留光标位置？

【参考方案1】：

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

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

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

【讨论】：

selectionStart 和 selectionEnd 肯定是要走的路，但你必须确保 textarea 中没有自定义选择。

@borisano 是的，你说得对，我只是想。如果操作后什么都不选，设置 selectionStart=selectionEnd。如果要选择括号包围的任何内容，请进行相应更改。而且，不知道如果 selectionStart > selectionEnd...

会发生什么

【参考方案2】：

您可以按照here 的描述使用selectionStart 属性来存储然后重置光标位置

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

然后使用this之类的东西来设置光标位置