Question

我有一个textarea和一个带有值的div。当我点击一个值时，我将其插入textarea。我需要将它插入我的光标在textarea中的位置。为什么我说WAS？因为当我将其移出并单击要插入的值时，我认为它在文本区域中失去焦点。

所以，我的问题是，有没有办法“记住”textarea中的最新光标位置，然后在那个位置插入我的值？

也许它可能是字符串中的字符编号？..目前我这样添加：

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

我也使用jQuery，也许我可以使用它？

Answer 1

我编写了一个跨浏览器的jQuery插件，用于处理textareas中的插入/选择以及名为Rangy inputs的文本输入（可怕的名字，我真的应该想到更好的一个）。这里的方法和Edgar Villegas Alvarado's answer中的技术的组合应该可以解决问题，尽管在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/

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

这应该会给你一个坚实的开端，我希望。干杯

Answer 3

如果插入符号（光标）位于文本字段中的某个位置，则它在Javascript中注册为空选择。也就是说，selectionStart和selectionEnd属性是相同的。您可以使用这些属性来检测插入符的位置。

Answer 4

显然，selectionStart和selectionEnd在这里非常有用。看一下这个： http://www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/

Answer 5

您可以使用jQuery Caret plugin来获取/设置光标位置用法示例：

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

你可以像这样“存储”这个位置：

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

要检索它（在你的div点击事件上），请执行以下操作：

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

希望这会有所帮助。干杯

将值插入到游标所在的TEXTAREA中

5 个答案: