如何使用JQuery的InsertAtCaret函数

How to use JQuery InsertAtCaret Function

本文关键字：InsertAtCaret 函数 JQuery 何使用      更新时间：2023-09-26

我在这里找到了JQuery InsertAtCaret函数，但是没有给出如何使用它的细节。我试了很多，了解它可以如何使用，但找不到任何方法。函数如下:

$.fn.insertAtCaret = function(myValue) {
    return this.each(function() {
        var me = this;
        if (document.selection) { // IE
            me.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
            me.focus();
        } else if (me.selectionStart || me.selectionStart == '0') { // Real browsers
            var startPos = me.selectionStart, endPos = me.selectionEnd, scrollTop = me.scrollTop;
            me.value = me.value.substring(0, startPos) + myValue + me.value.substring(endPos, me.value.length);
            me.focus();
            me.selectionStart = startPos + myValue.length;
            me.selectionEnd = startPos + myValue.length;
            me.scrollTop = scrollTop;
        } else {
            me.value += myValue;
            me.focus();
        }
    });
};

我有一个文本框输入字段和它下面的文本区域。我应该在哪里调用这个函数，我应该给它什么值。这里我需要给出textarea的引用

以下是上述插件的修改版本:

jQuery.fn.extend({
insertAtCaret: function(myValue){
  return this.each(function(i) {
    if (document.selection) {
      //For browsers like Internet Explorer
      this.focus();
      sel = document.selection.createRange();
      sel.text = myValue;
      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(endPos,this.value.length);
      this.focus();
      this.selectionStart = startPos + myValue.length;
      this.selectionEnd = startPos + myValue.length;
      this.scrollTop = scrollTop;
    } else {
      this.value += myValue;
      this.focus();
    }
  })
}
});

基本上，这个插件允许您在多个textbox或textarea的插入符号处插入一段文本。你可以这样使用:

 $('#element1, #element2, #element3, .class-of-elements').insertAtCaret('text');

工作演示

Firefox最近帮我破解了上面的代码，我不得不做一些修改。

jQuery.fn.extend({insertAtCaret: function(myValue){
    return this.each(function(i) {
        if (document.selection) {
            //For browsers like Internet Explorer
            //log("INSERT IE: " + myValue);
            this.focus();
            var sel = document.selection.createRange();
            sel.text = myValue;
            this.focus();
        } else if (this.selectionStart || this.selectionStart == '0') {
            //For browsers like Firefox and Webkit based
            //log("INSERT Firefox: " + myValue);
            var startPos = this.selectionStart;
            var endPos = this.selectionEnd;
            var scrollTop = this.scrollTop;
            this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos,this.value.length);
            this.focus();
            this.selectionStart = startPos + myValue.length;
            this.selectionEnd = startPos + myValue.length;
            this.scrollTop = scrollTop;
        } else if($(this).hasClass("ql-editor")){
            //log("INSERT QL-EDITOR: " + myValue);
            var range = window.getSelection().getRangeAt(0);
            var startPos = range.startOffset;
            var endPos = range.endOffset;
            var value = $(this).html();
            $(this).html(value.substring(0, startPos) + myValue + value.substring(endPos, value.length));
            this.focus();
        } else {
            //log("INSERT Unknown: " + myValue);
            this.value += myValue;
            this.focus();
        }
        //log(this);
    });
}});
相关文章：