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

Posted 2023-05-07

【中文标题】在文本区域中的光标位置之后插入文本

【英文标题】：Inserting text after cursor position in text area

【发布时间】：2011-07-09 08:58:11

【问题描述】：

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

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

【问题讨论】：

Insert text into textarea with jQuery 的可能重复项

【参考方案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);

就是这样。

【讨论】：

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

非常适合在光标位置插入文本。请注意，如果用户选择了一些文本，它将在选择之前插入，而不是替换它（在 Chrome 中测试）。

函数 getCursorPosition 将更改为 document.getElementById('textarea').selectionStart; 或 document.getElementById('textarea').selectionEnd;

【参考方案2】：

您可以结帐this answer。 insertAtCaret jquery 插件看起来很不错。

【讨论】：

实际上链接到一个无法运行的版本。上面那个就是你想要的那个。这是小提琴jsfiddle.net/rmDzu/2

【参考方案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("[Before selection]", "[after]"); 另外：不要以任何方式声称这是我的。