Javascript 在文本区域中的光标位置后插入文本

Inserting text after cursor position in text area

提问by Captain Comic

The script below inserts text to the end of text area. I need to change to insert text after current cursor position in the text area.

下面的脚本将文本插入到文本区域的末尾。我需要更改为在文本区域中的当前光标位置后插入文本。

jQuery(document).ready(function($){
    $('#addCommentImage').click(function(){
        var imageLoc = prompt('Enter the Image URL:');
        if ( imageLoc ) {
            $('#comment').val($('#comment').val() + '[img]' + imageLoc + '[/img]');
        }
        return false;
    });
});

回答by d.popov

if the above does not work (it didn't in my case - maybe my configuration is little bit different), here is another solution:

如果上述方法不起作用（在我的情况下不起作用 - 也许我的配置有点不同），这是另一种解决方案：

you can use this extension function to get the position:

您可以使用此扩展功能来获取位置：

(function ($, undefined) {
    $.fn.getCursorPosition = function () {
        var el = $(this).get(0);
        var pos = 0;
        if ('selectionStart' in el) {
            pos = el.selectionStart;
        } else if ('selection' in document) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        }
        return pos;
    }
})(jQuery);

the usage is : var position = $("#selector").getCursorPosition()

用法是： var position = $("#selector").getCursorPosition()

to insert text at the position:

在以下位置插入文本：

var content = $('#selector').val();
var newContent = content.substr(0, position) + "text to insert" + content.substr(position);
$('#selector').val(newContent);

That's all.

就这样。

回答by Darin Dimitrov

You may checkout this answer. The insertAtCaretjquery plugin seems very nice.

您可以查看此答案。该insertAtCaretjQuery插件看起来非常漂亮。

回答by Tazmanian Tad

I have modified various versions of these to come up with a version that places the first text before whatever you have selected and the second text after what you have selected and keep what is selected still selected. This works in chrome and FF, not in IE though.

我已经修改了这些版本的各种版本，以提出一个版本，将第一个文本放在您选择的内容之前，将第二个文本放在您选择的内容之后，并保持选中的内容。这适用于 chrome 和 FF，但不适用于 IE。

jQuery.fn.extend({
insertAtCaret: function(myValue, myValueE){
  return this.each(function(i) {
    if (document.selection) {
      //For browsers like Internet Explorer
      this.focus();
      sel = document.selection.createRange();
      sel.text = myValue + myValueE;
      this.focus();
    }
    else if (this.selectionStart || this.selectionStart == '0') {
      //For browsers like Firefox and Webkit based
      var startPos = this.selectionStart;
      var endPos = this.selectionEnd;
      var scrollTop = this.scrollTop;
      this.value = this.value.substring(0,     startPos)+myValue+this.value.substring(startPos,endPos)+myValueE+this.value.substring(endPos,this.value.length);
      this.focus();
      this.selectionStart = startPos + myValue.length;
      this.selectionEnd = ((startPos + myValue.length) + this.value.substring(startPos,endPos).length);
      this.scrollTop = scrollTop;
    } else {
      this.value += myValue;
      this.focus();
    }
  })
    }
});

Usage: $('#box').insertAtCaret("[Before selection]", "[after]");Also: not claiming this as mine in any way.

用法： $('#box').insertAtCaret("[Before selection]", "[after]");另外：不要以任何方式声称这是我的。