actualizar el valor del área de texto, pero mantener la posición del cursor

Question

Tengo un área de texto html que se actualizará periódicamente a través de javascript.

cuando hago esto:

$("#textarea").val(new_val); 

El cursor se mueve al final del texto.

Me gustaría actualizar el texto sin cambiar la posición del cursor. Además, si el usuario tiene un rango de texto seleccionado, se debe preservar el resaltado.

Answer 1

Aquí hay un par de funciones que obtienen y establecen la posición de selección/intercalación en un área de texto en todos los principales navegadores.

Nota: si no es necesario para apoyar IE < = 8, sólo tiene que utilizar los selectionStart y selectionEnd propiedades (MDN). Todo el código complicado a continuación está ahí para apoyar versiones antiguas de IE.

function getInputSelection(el) { 
    var start = 0, end = 0, normalizedValue, range, 
     textInputRange, len, endRange; 

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { 
     start = el.selectionStart; 
     end = el.selectionEnd; 
    } else { 
     range = document.selection.createRange(); 

     if (range && range.parentElement() == el) { 
      len = el.value.length; 
      normalizedValue = el.value.replace(/\r\n/g, "\n"); 

      // Create a working TextRange that lives only in the input 
      textInputRange = el.createTextRange(); 
      textInputRange.moveToBookmark(range.getBookmark()); 

      // Check if the start and end of the selection are at the very end 
      // of the input, since moveStart/moveEnd doesn't return what we want 
      // in those cases 
      endRange = el.createTextRange(); 
      endRange.collapse(false); 

      if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) { 
       start = end = len; 
      } else { 
       start = -textInputRange.moveStart("character", -len); 
       start += normalizedValue.slice(0, start).split("\n").length - 1; 

       if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) { 
        end = len; 
       } else { 
        end = -textInputRange.moveEnd("character", -len); 
        end += normalizedValue.slice(0, end).split("\n").length - 1; 
       } 
      } 
     } 
    } 

    return { 
     start: start, 
     end: end 
    }; 
} 

function offsetToRangeCharacterMove(el, offset) { 
    return offset - (el.value.slice(0, offset).split("\r\n").length - 1); 
} 

function setInputSelection(el, startOffset, endOffset) { 
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { 
     el.selectionStart = startOffset; 
     el.selectionEnd = endOffset; 
    } else { 
     var range = el.createTextRange(); 
     var startCharMove = offsetToRangeCharacterMove(el, startOffset); 
     range.collapse(true); 
     if (startOffset == endOffset) { 
      range.move("character", startCharMove); 
     } else { 
      range.moveEnd("character", offsetToRangeCharacterMove(el, endOffset)); 
      range.moveStart("character", startCharMove); 
     } 
     range.select(); 
    } 
} 

Cuando se cambia el valor del área de texto, guardar por primera vez a la selección, a continuación, restaurarla después:

var t = document.getElementById("textarea"); 
var sel = getInputSelection(t); 
t.value = some_new_value; 
setInputSelection(t, sel.start, sel.end);