Wprowadź wartość do TEKSTYLIKACJI, gdzie kursor był

Question

Mam textarea i div z wartościami. Kiedy klikam na wartość, wstawiam ją do textarea. Potrzebuję go wstawić tam, gdzie mój kursor był w textarea. Dlaczego mówię "WAS"? Ponieważ kiedy go wypuszczę i kliknę na wartość, którą chcę wstawić, zakładam, że traci ostrość w obszarze tekstowym.

Moje pytanie brzmi: czy istnieje sposób, aby "zapamiętać" ostatnią pozycję kursora w obrębie pola tekstowego, a następnie wstawić moje wartości w tej pozycji? ?

Może to być liczba char w ciąg .. Obecnie dodam to tak:

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

Również używam jQuery, chyba mogę go używać?

Answer 1

Napisałem wtyczkę jQuery z różnymi przeglądarkami do obsługi daszka/selekcji w tekstach i wejściach tekstowych o nazwie Rangy inputs (straszna nazwa, naprawdę powinienem wymyślić lepszy).Połączenie metod z tego i technik w Edgar Villegas Alvarado's answer powinno wystarczyć, choć w IE, Zdarzenie focusout zbyt późno i będziesz musiał używać zastrzeżonych beforedeactivate zdarzenie Zamiast:

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

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

$textBox.focusout(saveSelection); 

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

Podczas wstawiania tekstu później dodaje wstawi tekst w poprzedniej pozycji kursora (lub zastąpienie wcześniej zaznaczonego tekstu, jeśli użytkownik wybrał występuje):

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

Patrz jsFiddle przykładem: http://jsfiddle.net/rQXrJ/1/

Answer 2

Jeśli kursor (kursor) znajduje się gdzieś w polu tekstowym, rejestruje się w Javascript jako pusty wybór. Oznacza to, że atrybuty selectionStart i selectionEnd są takie same. Możesz użyć tych atrybutów, aby wykryć pozycję karetki.

Answer 3

Podobno selekcjaStart i selectionEnd są tutaj bardzo przydatne. Sprawdź to: http://www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/

Answer 4

Możesz użyć jQuery Caret plugin, aby uzyskać/ustawić pozycję kursora.
Przykład użycia:

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

Mogłeś 'sklep' to pozycja tak:

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

Aby je odzyskać (na zdarzenia click div), wykonaj następujące czynności:

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

Mam nadzieję że to pomoże. Cheers

Answer 5

Oto przykład roboczych, co staramy się robić to sprawdzić pod adresem: http://jsfiddle.net/J5Z2n/1/

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

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); 

    });  

Oryginalny funkcja została zapożyczona z tego postu http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript

To powinno dać ci solidny start, mam nadzieję. Pozdrowienia