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

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

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

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

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

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

Ответы

Ответ 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/

Ответ 2

Вот рабочий пример того, что вы пытаетесь проверить: 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);

    });

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

Это должно дать вам надежное начало. Надеюсь. Приветствия

Ответ 3

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

Ответ 5

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

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

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

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

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

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

Надеюсь, это поможет. Приветствия