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

Question

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

- Captain Comic

---

可能是使用jQuery将文本插入到文本区域的重复问题。 - bummi

Answer 1

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

您可以使用此扩展函数来获取位置：

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

使用方法为：var position = $("#selector").getCursorPosition()

在所在位置插入文本：

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

就这些。

- d.popov

---

非常感谢，对于Angular JS的实现非常有用，因为在ng-model绑定的情况下，insertAtCaret()的修改不起作用。 - Denis

在光标位置插入文本效果良好。请注意，如果用户已选择了一些文本，则会在所选文本之前插入，而不是替换它（在Chrome中测试过）。 - rybo111

函数getCursorPosition将更改为document.getElementById('textarea').selectionStart;或document.getElementById('textarea').selectionEnd;。 - Fábio Zangirolami

Answer 2

你可以查看这个答案。 insertAtCaret jquery插件似乎非常好用。

- Darin Dimitrov

---

实际上链接到了一个无法运行的版本。上面那个是你想要的。这是 jsfiddle 链接：http://jsfiddle.net/rmDzu/2/ - user1037355

Answer 3

我已经修改了各种版本，得出了一个版本，可以将第一个文本放在您选择的内容之前，将第二个文本放在您选择的内容之后，并保持所选内容不变。这在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();
    }
  })
    }
});

用法： $('#box').insertAtCaret("[在选中文本前插入的内容]", "[在选中文本后插入的内容]"); 另外：本人不以任何方式声明此代码归属为我所有。

- Tazmanian Tad