Come mantenere la posizione del cursore sulla modifica del testo dell'area di testo?

Question

Sto provando ad implementare una textarea che inserisce automaticamente parenti ravvicinati in React, ma ogni volta che modifico la proprietà value del textarea, il cursore salta alla fine del testo che si sta modificando.

Ecco la mia funzione 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}}) 

    } 

Questo inserisce con successo il paren, ma come faccio a preservare la posizione del cursore?

Answer 1

Sto facendo cose simili prima.

Il modo per cambiare la posizione del cursore sta usando: evt.target.selectionEnd

Nel tuo caso, è possibile registrare in fondo alla selectionEnd prima di inserire, e dopo aver inserito, impostare il selectionEnd alla posizione che dovrebbe essere.

Answer 2

È possibile utilizzare selectionStart prop come descritto here per memorizzare e poi ripristinare la posizione del cursore

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

Quindi utilizzare qualcosa come this per impostare la posizione del cursore