Wie kann man die Cursorposition bei textarea text change beibehalten?

Question

Ich versuche, eine Textarea zu implementieren, die in React automatisch nahe Parens einfügt, aber wenn ich die Value-Eigenschaft des Textarea ändern, springt der Cursor an das Ende des zu bearbeitenden Textes.

Hier ist meine onChange Funktion:

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

    } 

Diese erfolgreich die paren einfügt, aber wie kann ich die Cursor-Position bewahren?

Answer 1

Ich mache ähnliche Dinge schon einmal.

Der Weg, um die Cursorposition ändern verwendet: evt.target.selectionEnd

In Ihrem Fall können Sie die selectionEnd vor dem Einsetzen und nach dem Einlegen, stellen Sie die selectionEnd auf die Position sollte es sein, notieren nach unten.

Answer 2

Sie können selectionStart prop wie here zum Speichern und dann Cursorposition zurückgesetzt

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

Dann etwas wie this verwendet Cursorposition zu setzen