javascript - link - Insertar valor en TEXTAREA donde estaba el cursor

jquery methods

Question

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

Entonces, mi pregunta es, ¿hay una manera de "recordar" la última posición del cursor en el área de texto y luego insertar mis valores en esa posición?

¿Quizás podría ser un número de char en una cadena? .. Actualmente lo agrego así:

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

También uso jQuery, tal vez podría usarlo?

Answer 1

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 2

Este es un ejemplo práctico de lo que está tratando de hacer, eche un vistazo a: http://jsfiddle.net/J5Z2n/1/

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

la 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 tomada de esta publicación http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript

Eso debería darle una ventaja sólida, espero. Aclamaciones

Answer 3

He escrito un complemento jQuery de navegador cruzado para tratar con el caret / selection en las áreas de texto y las entradas de texto llamadas entradas Rangy (nombre terrible, realmente debería pensar en una mejor). Una combinación de los métodos de este y las técnicas de la respuesta de Edgar Villegas Alvarado deberían hacer el truco, aunque en IE, el evento de focusout se dispara demasiado tarde y tendrá que usar el evento propietario beforedeactivate :

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

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

$textBox.focusout(saveSelection);

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

Cuando inserte texto más tarde, lo siguiente insertará texto en la posición anterior del cursor (o sobrescribirá el texto seleccionado previamente, si el usuario seleccionó alguno):

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

Vea el ejemplo de jsFiddle aquí: http://jsfiddle.net/rQXrJ/1/

Answer 4

Puede usar el complemento jQuery Caret para obtener / configurar la posición del cursor.
Ejemplo de uso:

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

Podrías "almacenar" esta posición así:

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

Para recuperarlo (en su evento div click), haga esto:

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

Espero que esto ayude. Aclamaciones

Answer 5

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. Puedes usar esos atributos para detectar la posición del caret.