Вставьте значение в TEXTAREA, где был курсор

Question

У меня есть textarea и div со значениями. Когда я нажимаю на значение, я вставляю его в текстовое поле. Мне нужно, чтобы он был вставлен, где мой курсор был в текстовой области. Почему я говорю БЫЛО? Потому что, когда я перемещаю его и нажимаю на значение для вставки, я предполагаю, что оно теряет фокус в текстовой области.

Итак, мой вопрос, есть ли способ "запомнить" последнюю позицию курсора в пределах текстовой области и затем вставить мои значения в эту позицию?

Возможно, это может быть номер символа в строке?.. В настоящее время я добавляю это так:

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

Также я использую JQuery, может быть, я мог бы использовать его?

Answer 1

Я написал кросс-браузерный плагин jQuery для работы с кареткой / выделением в текстовых и текстовых вводах, называемых Rangy input (ужасное имя, я действительно должен подумать о лучшем). Сочетание методов из этого и методов в ответе Эдгара Виллегаса Альварадо должно сработать, хотя в IE focusout событие происходит слишком поздно, и вам нужно будет использовать проприетарный beforedeactivate событие вместо:

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

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

$textBox.focusout(saveSelection);

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

При вставке текста позже, следующий текст будет вставлен в предыдущую позицию курсора (или перезапишет ранее выбранный текст, если пользователь выбрал любой):

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

Смотрите пример jsFiddle здесь: http://jsfiddle.net/rQXrJ/1/

Answer 2

Вот рабочий пример того, что вы пытаетесь сделать, проверьте по адресу: http://jsfiddle.net/J5Z2n/1/

Привет, мой хороший друг....
как дела

JQuery:

функция 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));

  } 
  еще {

      myField.val() += myValue;

  }
}

// вызов функции
var targetBox = $('textarea#insert'),
    startSel, 
    endSel;
targetBox.bind('focusout', function() {
    //insertAtCursor(это "как дела");
    startSel = this.selectionStart;
    endSel = this.selectionEnd;
});

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

    });    

Оригинальная функция была заимствована из этого поста http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript

Надеюсь, это должно дать вам твердое преимущество. ура

Answer 3

Очевидно, selectionStart и selectionEnd весьма полезны здесь. Проверьте это: http://www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/

Answer 4

Если курсор (курсор) находится где-то в текстовом поле, он регистрируется в Javascript как пустой выбор. То есть атрибуты selectionStart и selectionEnd одинаковы. Вы можете использовать эти атрибуты для определения положения каретки.

Answer 5

Вы можете использовать плагин jQuery Caret, чтобы получить / установить позицию курсора.
Пример использования:

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

Вы можете "сохранить" эту позицию следующим образом:

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

Чтобы получить его (по вашему событию div click), сделайте это:

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

Надеюсь это поможет. ура