Insertar valor en TEXTAREA donde el cursor era

Question

Tengo un área de texto y un div con valores. Cuando hago clic en un valor, lo inserto en textarea. Necesito que se inserte donde estaba mi cursor en textarea. ¿Por qué digo WAS? Porque cuando lo muevo y hago clic en un valor para insertarlo, supongo que pierde el foco en el área de texto.

Entonces, mi pregunta es, ¿hay alguna manera de "recordar" la última posición del cursor dentro de textarea y luego insertar mis valores en esa posición? ?

quizás podría ser un número caracter en una cadena .. Actualmente agrego así:

input.val(function(i, val) { return val + " " + myInsert + " "; }); 

También utilizo jQuery, tal vez podría utilizarlo?

Answer 1

He escrito un complemento de jQuery multiproveedor para tratar con el cursor/selección en textareas y entradas de texto llamado Rangy inputs (terrible nombre, realmente debería pensar en uno mejor).Una combinación de métodos de esta y las técnicas de Edgar Villegas Alvarado's answer debe hacer el truco, si bien en IE, los focusout desencadena el evento demasiado tarde y tendrá que utilizar la propiedad beforedeactivate evento en su lugar: texto

var $textBox = $("#foo"); 

function saveSelection(){ 
    $textBox.data("lastSelection", $textBox.getSelection()); 
} 

$textBox.focusout(saveSelection); 

$textBox.bind("beforedeactivate", function() { 
    saveSelection(); 
    $textBox.unbind("focusout"); 
}); 

Al insertar más adelante , lo siguiente será insertar texto en la posición del cursor anterior (o sobrescribir el texto seleccionado previamente, si el usuario había seleccionado cualquier):

var selection = $textBox.data("lastSelection"); 
$textBox.focus(); 
$textBox.setSelection(selection.start, selection.end); 
$textBox.replaceSelectedText("Some new text"); 

Ver ejemplo jsFiddle aquí: http://jsfiddle.net/rQXrJ/1/

Answer 2

Si el cursor (el cursor) está en algún lugar del campo de texto, se registra en Javascript como una selección vacía. Es decir, los atributos selectionStart y selectionEnd son los mismos. Puede usar esos atributos para detectar la posición del cursor.

Answer 3

Aparentemente selectionStart y selectionEnd son bastante útiles aquí. Verifique esto: http://www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/

Answer 4

Puede usar el jQuery Caret plugin para obtener/ajustar la posición del cursor. el uso
Ejemplo:

var cursorPosition = $("#textbox").caret().start); 

Se podría 'tienda' esta posición así:

$("#textbox").focusout(function(){ 
    var cursorPosition = $(this).caret().start); 
    $(this).data("lastCursorPos", cursorPosition); 
}); 

para recuperarlo (en su evento click div), hacer esto:

var lastCursorPosition = $("#textbox").data("lastCursorPos"); 

Espero que esto ayude. Saludos

Answer 5

Aquí es un ejemplo práctico de lo que está tratando de hacer echarle un vistazo en: http://jsfiddle.net/J5Z2n/1/

 
Hello there my good friend.... 
how do you do 

el jQuery:

 
function insertAt (myField, myValue, startSel, endSel) { 
    if (startSel || startSel == '0') { 
     var startPos = startSel; 

     var endPos = endSel; 

     myField.val(myField.val().substring(0, startPos)+ myValue+ myField.val().substring(endPos, myField.val().length)); 

    } 
    else { 

     myField.val() += myValue; 

    } 
} 

// calling the function 
var targetBox = $('textarea#insert'), 
    startSel, 
    endSel; 
targetBox.bind('focusout', function() { 
    //insertAtCursor(this, 'how do you do'); 
    startSel = this.selectionStart; 
    endSel = this.selectionEnd; 
}); 

    $("#myvalue").click(function() { 
     var myValue = $(this).text(); 
     insertAt(targetBox, myValue, startSel, endSel); 

    });  

La función original fue tomado de este post http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript

Eso debería darte una buena ventaja, espero. Cheers