blocks|key|543125|text|使用selectionStart/selectionEnd+properties+of+the+input+element+(也适用于<textarea>+)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|543126|function+insertAtCursor(myField,+myValue)+{
++++//IE+support
++++if+(document.selection)+{
++++++++myField.focus();
++++++++sel+=+document.selection.createRange();
++++++++sel.text+=+myValue;
++++}
++++//MOZILLA+and+others
++++else+if+(myField.selectionStart+%7C%7C+myField.selectionStart+==+'0')+{
++++++++var+startPos+=+myField.selectionStart;
++++++++var+endPos+=+myField.selectionEnd;
++++++++myField.value+=+myField.value.substring(0,+startPos)
++++++++++++%2B+myValue
++++++++++++%2B+myField.value.substring(endPos,+myField.value.length);
++++}+else+{
++++++++myField.value+%2B=+myValue;
++++}
}|code-block|syntax|javascript|543127|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement^0|2|E|H|C|1V|A|U|V|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>Use <code>selectionStart</code>/<code>selectionEnd</code> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement" rel="noreferrer">properties of the input element</a> (works for <code>&lt;textarea&gt;</code> as well)</p>
<pre><code>function insertAtCursor(myField, myValue) {
    //IE support
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
    }
    //MOZILLA and others
    else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos)
            + myValue
            + myField.value.substring(endPos, myField.value.length);
    } else {
        myField.value += myValue;
    }
}
</code></pre>


blocks|key|543171|text|这段代码可以在jQuery+1.9%2B的几行代码中帮助您：http://jsfiddle.net/4MBUG/2/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|543172|$('input[type=button]').on('click',+function()+{
++++var+cursorPos+=+$('#text').prop('selectionStart');
++++var+v+=+$('#text').val();
++++var+textBefore+=+v.substring(0,++cursorPos);
++++var+textAfter++=+v.substring(cursorPos,+v.length);

++++$('#text').val(textBefore+%2B+$(this).val()+%2B+textAfter);
});|code-block|syntax|javascript|543173|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/4MBUG/2/^0|S|S|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>This snippet could help you with it in a few lines of jQuery 1.9+: <a href="http://jsfiddle.net/4MBUG/2/" rel="noreferrer">http://jsfiddle.net/4MBUG/2/</a></p>

<pre><code>$('input[type=button]').on('click', function() {
    var cursorPos = $('#text').prop('selectionStart');
    var v = $('#text').val();
    var textBefore = v.substring(0,  cursorPos);
    var textAfter  = v.substring(cursorPos, v.length);

    $('#text').val(textBefore + $(this).val() + textAfter);
});
</code></pre>


blocks|key|543214|text|将其更改为getElementById(myField)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|543215|function+insertAtCursor(myField,+myValue)+{
++++//+IE+support
++++if+(document.selection)+{
++++++++document.getElementById(myField).focus();
++++++++sel+=+document.selection.createRange();
++++++++sel.text+=+myValue;
++++}
++++//+MOZILLA+and+others
++++else+if+(document.getElementById(myField).selectionStart+%7C%7C+document.getElementById(myField).selectionStart+==+'0')+{
++++++++var+startPos+=+document.getElementById(myField).selectionStart;
++++++++var+endPos+=+document.getElementById(myField).selectionEnd;
++++++++document.getElementById(myField).value+=
++++++++++++++++document.getElementById(myField).value.substring(0,+startPos)
++++++++++++++++%2B+myValue
++++++++++++++++%2B+document.getElementById(myField).value.substring(endPos,+document.getElementById(myField).value.length);
++++}+else+{
++++++++document.getElementById(myField).value+%2B=+myValue;
++++}
}|code-block|syntax|javascript|543216|entityMap^0|5|N|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Changed it to <code>getElementById(myField)</code>:</p>
<pre><code>function insertAtCursor(myField, myValue) {
    // IE support
    if (document.selection) {
        document.getElementById(myField).focus();
        sel = document.selection.createRange();
        sel.text = myValue;
    }
    // MOZILLA and others
    else if (document.getElementById(myField).selectionStart || document.getElementById(myField).selectionStart == '0') {
        var startPos = document.getElementById(myField).selectionStart;
        var endPos = document.getElementById(myField).selectionEnd;
        document.getElementById(myField).value =
                document.getElementById(myField).value.substring(0, startPos)
                + myValue
                + document.getElementById(myField).value.substring(endPos, document.getElementById(myField).value.length);
    } else {
        document.getElementById(myField).value += myValue;
    }
}
</code></pre>


blocks|key|543274|text|为了正确的Javascript|type|unstyled|depth|inlineStyleRanges|entityRanges|data|543275|HTMLTextAreaElement.prototype.insertAtCaret+=+function+(text)+{
++text+=+text+%7C%7C+'';
++if+(document.selection)+{
++++//+IE
++++this.focus();
++++var+sel+=+document.selection.createRange();
++++sel.text+=+text;
++}+else+if+(this.selectionStart+%7C%7C+this.selectionStart+===+0)+{
++++//+Others
++++var+startPos+=+this.selectionStart;
++++var+endPos+=+this.selectionEnd;
++++this.value+=+this.value.substring(0,+startPos)+%2B
++++++text+%2B
++++++this.value.substring(endPos,+this.value.length);
++++this.selectionStart+=+startPos+%2B+text.length;
++++this.selectionEnd+=+startPos+%2B+text.length;
++}+else+{
++++this.value+%2B=+text;
++}
};|code-block|syntax|javascript|543276|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>For the sake of proper Javascript</p>

<pre><code>HTMLTextAreaElement.prototype.insertAtCaret = function (text) {
  text = text || '';
  if (document.selection) {
    // IE
    this.focus();
    var sel = document.selection.createRange();
    sel.text = text;
  } else if (this.selectionStart || this.selectionStart === 0) {
    // Others
    var startPos = this.selectionStart;
    var endPos = this.selectionEnd;
    this.value = this.value.substring(0, startPos) +
      text +
      this.value.substring(endPos, this.value.length);
    this.selectionStart = startPos + text.length;
    this.selectionEnd = startPos + text.length;
  } else {
    this.value += text;
  }
};
</code></pre>


blocks|key|326390|text|发布修改后的函数以供自己参考。此示例插入<select>对象中的选定项目，并将插入符号放在标签之间：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|326391|//Inserts+a+choicebox+selected+element+into+target+by+id
function+insertTag(choicebox,id)+{
++++var+ta=document.getElementById(id)
++++ta.focus()
++++var+ss=ta.selectionStart
++++var+se=ta.selectionEnd
++++ta.value=ta.value.substring(0,ss)%2B'<'%2Bchoicebox.value%2B'>'%2B'</'%2Bchoicebox.value%2B'>'%2Bta.value.substring(se,ta.value.length)
++++ta.setSelectionRange(ss%2Bchoicebox.value.length%2B2,ss%2Bchoicebox.value.length%2B2)
}|code-block|syntax|javascript|326392|entityMap^0|K|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Posting modified function for own reference. This example inserts a selected item from <code>&lt;select&gt;</code> object and puts the caret between the tags:</p>

<pre><code>//Inserts a choicebox selected element into target by id
function insertTag(choicebox,id) {
    var ta=document.getElementById(id)
    ta.focus()
    var ss=ta.selectionStart
    var se=ta.selectionEnd
    ta.value=ta.value.substring(0,ss)+'&lt;'+choicebox.value+'&gt;'+'&lt;/'+choicebox.value+'&gt;'+ta.value.substring(se,ta.value.length)
    ta.setSelectionRange(ss+choicebox.value.length+2,ss+choicebox.value.length+2)
}
</code></pre>


blocks|key|543369|text|Rab的回答很有效，但不适用于Microsoft+Edge，所以我也为Edge添加了一个小调整：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|543370|https://jsfiddle.net/et9borp4/|offset|length|543371|function+insertAtCursor(myField,+myValue)+{
++++//IE+support
++++if+(document.selection)+{
++++++++myField.focus();
++++++++sel+=+document.selection.createRange();
++++++++sel.text+=+myValue;
++++}
++++//+Microsoft+Edge
++++else+if(window.navigator.userAgent.indexOf("Edge")+>+-1)+{
++++++var+startPos+=+myField.selectionStart;+
++++++var+endPos+=+myField.selectionEnd;+

++++++myField.value+=+myField.value.substring(0,+startPos)%2B+myValue+
+++++++++++++%2B+myField.value.substring(endPos,+myField.value.length);+

++++++var+pos+=+startPos+%2B+myValue.length;
++++++myField.focus();
++++++myField.setSelectionRange(pos,+pos);
++++}
++++//MOZILLA+and+others
++++else+if+(myField.selectionStart+%7C%7C+myField.selectionStart+==+'0')+{
++++++++var+startPos+=+myField.selectionStart;
++++++++var+endPos+=+myField.selectionEnd;
++++++++myField.value+=+myField.value.substring(0,+startPos)
++++++++++++%2B+myValue
++++++++++++%2B+myField.value.substring(endPos,+myField.value.length);
++++}+else+{
++++++++myField.value+%2B=+myValue;
++++}
}|code-block|syntax|javascript|543372|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|U|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>Rab's answer works great, but not for Microsoft Edge, so I added a small adaptation for Edge as well: </p>

<p><a href="https://jsfiddle.net/et9borp4/" rel="noreferrer">https://jsfiddle.net/et9borp4/</a></p>

<pre><code>function insertAtCursor(myField, myValue) {
    //IE support
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
    }
    // Microsoft Edge
    else if(window.navigator.userAgent.indexOf("Edge") &gt; -1) {
      var startPos = myField.selectionStart; 
      var endPos = myField.selectionEnd; 

      myField.value = myField.value.substring(0, startPos)+ myValue 
             + myField.value.substring(endPos, myField.value.length); 

      var pos = startPos + myValue.length;
      myField.focus();
      myField.setSelectionRange(pos, pos);
    }
    //MOZILLA and others
    else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos)
            + myValue
            + myField.value.substring(endPos, myField.value.length);
    } else {
        myField.value += myValue;
    }
}
</code></pre>


blocks|key|326428|text|/**
+*+Usage+"foo+baz".insertInside(4,+0,+"bar+")+==>+"foo+bar+baz"
+*/
String.prototype.insertInside+=+function(start,+delCount,+newSubStr)+{
++++return+this.slice(0,+start)+%2B+newSubStr+%2B+this.slice(start+%2B+Math.abs(delCount));
};

$('textarea').bind("keydown+keypress",+function+(event)+{
++++var+val+=+$(this).val();
++++var+indexOf+=+$(this).prop('selectionStart');
++++if(event.which+===+13)+{
++++++++val+=+val.insertInside(indexOf,+0,++"<br>\n");
++++++++$(this).val(val);
++++++++$(this).focus();
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|326429|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>/**
 * Usage &quot;foo baz&quot;.insertInside(4, 0, &quot;bar &quot;) ==&gt; &quot;foo bar baz&quot;
 */
String.prototype.insertInside = function(start, delCount, newSubStr) {
    return this.slice(0, start) + newSubStr + this.slice(start + Math.abs(delCount));
};

$('textarea').bind(&quot;keydown keypress&quot;, function (event) {
    var val = $(this).val();
    var indexOf = $(this).prop('selectionStart');
    if(event.which === 13) {
        val = val.insertInside(indexOf, 0,  &quot;&lt;br&gt;\n&quot;);
        $(this).val(val);
        $(this).focus();
    }
});
</code></pre>


blocks|key|326483|text|如果用户在插入文本后没有触摸输入，则永远不会触发“input”事件，并且value属性将不会反映更改。因此，以编程方式插入文本后触发输入事件非常重要。聚焦这个领域是不够的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|326484|以下是Snorvarg's+answer的副本，末尾有一个输入触发器：|offset|length|326485|function+insertAtCursor(myField,+myValue)+{
++++//IE+support
++++if+(document.selection)+{
++++++++myField.focus();
++++++++sel+=+document.selection.createRange();
++++++++sel.text+=+myValue;
++++}
++++//+Microsoft+Edge
++++else+if(window.navigator.userAgent.indexOf("Edge")+>+-1)+{
++++++var+startPos+=+myField.selectionStart;+
++++++var+endPos+=+myField.selectionEnd;+

++++++myField.value+=+myField.value.substring(0,+startPos)%2B+myValue+
+++++++++++++%2B+myField.value.substring(endPos,+myField.value.length);+

++++++var+pos+=+startPos+%2B+myValue.length;
++++++myField.focus();
++++++myField.setSelectionRange(pos,+pos);
++++}
++++//MOZILLA+and+others
++++else+if+(myField.selectionStart+%7C%7C+myField.selectionStart+==+'0')+{
++++++++var+startPos+=+myField.selectionStart;
++++++++var+endPos+=+myField.selectionEnd;
++++++++myField.value+=+myField.value.substring(0,+startPos)
++++++++++++%2B+myValue
++++++++++++%2B+myField.value.substring(endPos,+myField.value.length);
++++}+else+{
++++++++myField.value+%2B=+myValue;
++++}
++++triggerEvent(myField,'input');
}

function+triggerEvent(el,+type){
++if+('createEvent'+in+document)+{
++++//+modern+browsers,+IE9%2B
++++var+e+=+document.createEvent('HTMLEvents');
++++e.initEvent(type,+false,+true);
++++el.dispatchEvent(e);
++}+else+{
++++//+IE+8
++++var+e+=+document.createEventObject();
++++e.eventType+=+type;
++++el.fireEvent('on'%2Be.eventType,+e);
++}
}|code-block|syntax|javascript|326486|因triggerEvent功能而归功于plainjs.com|326487|有关w3schools.com上的oninput事件的更多信息|326488|我在创建一个聊天表情选择器时发现了这一点。如果用户只选择几个表情符号并点击“发送”按钮，则用户永远不会触摸输入字段。当检查value属性时，它始终是空的，即使在输入字段中可以看到插入的表情符号。事实证明，如果用户不触摸字段，'input‘事件就永远不会触发，解决方案是像这样触发它。我花了相当长的时间才弄明白这一点。希望这能节省一些人的时间。|326489|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/41426040/3319392|1|https://plainjs.com/javascript/events/trigger-an-event-11/|2|https://www.w3schools.com/jsref/event_oninput.asp^0|0|3|H|0|0|0|J|B|1|0|2|D|2|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|9|@$D|19|E|1A|1|1B]]|A|$]]|$1|M|3|N|5|6|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]|10|$5|T|U|V|A|$W|11]]]]

<p>If the user does not touch the input after text is inserted, the 'input' event is never triggered, and the value attribute will not reflect the change. Therefore it is important to trigger the input event after programmatically inserting text. Focusing the field is not enough.</p>

<p>The following is a copy of <a href="https://stackoverflow.com/a/41426040/3319392">Snorvarg's answer</a> with an input trigger at the end:</p>

<pre><code>function insertAtCursor(myField, myValue) {
    //IE support
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
    }
    // Microsoft Edge
    else if(window.navigator.userAgent.indexOf("Edge") &gt; -1) {
      var startPos = myField.selectionStart; 
      var endPos = myField.selectionEnd; 

      myField.value = myField.value.substring(0, startPos)+ myValue 
             + myField.value.substring(endPos, myField.value.length); 

      var pos = startPos + myValue.length;
      myField.focus();
      myField.setSelectionRange(pos, pos);
    }
    //MOZILLA and others
    else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos)
            + myValue
            + myField.value.substring(endPos, myField.value.length);
    } else {
        myField.value += myValue;
    }
    triggerEvent(myField,'input');
}

function triggerEvent(el, type){
  if ('createEvent' in document) {
    // modern browsers, IE9+
    var e = document.createEvent('HTMLEvents');
    e.initEvent(type, false, true);
    el.dispatchEvent(e);
  } else {
    // IE 8
    var e = document.createEventObject();
    e.eventType = type;
    el.fireEvent('on'+e.eventType, e);
  }
}
</code></pre>

<p>Credit to <a href="https://plainjs.com/javascript/events/trigger-an-event-11/" rel="noreferrer">plainjs.com</a> for the triggerEvent function</p>

<p>More about the oninput event at <a href="https://www.w3schools.com/jsref/event_oninput.asp" rel="noreferrer">w3schools.com</a></p>

<p>I discovered this while creating an emoji-picker for a chat. If the user just select a few emojis and hit the "send" button, the input field is never touched by the user. When checking the value attribute it was always empty, even though the inserted emoji unicodes was visible in the input field. Turns out that if the user does not touch the field the 'input' event never fired and the solution was to trigger it like this. It took quite a while to figure this one out... hope it will save someone some time.</p>


blocks|key|326555|text|一个简单的解决方案，可以在firefox，chrome，opera，safari和edge上工作，但可能不能在旧的IE浏览器上工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|326556|var+target+=+document.getElementById("mytextarea_id")

if+(target.setRangeText)+{
++++//if+setRangeText+function+is+supported+by+current+browser
++++target.setRangeText(data)
}+else+{
++++target.focus()
++++document.execCommand('insertText',+false+/*no+UI*/,+data);
}|code-block|syntax|javascript|326557|setRangeText函数允许您用提供的文本替换当前选定内容，或者如果没有选定内容，则在光标位置插入文本。据我所知，它只被firefox支持。|offset|length|style|CODE|326558|对于其他浏览器，有"insertText“命令，它只影响当前聚焦的html元素，并且具有与setRangeText相同的行为|326559|部分受此article启发|326560|entityMap|0|LINK|mutability|MUTABLE|url|https://www.everythingfrontend.com/posts/insert-text-into-textarea-at-cursor-position.html^0|0|0|0|C|0|19|C|0|4|7|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@$I|11|J|12|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@$I|14|J|15|K|L]]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@$I|17|J|18|1|19]]|A|$]]|$1|Q|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>A simple solution that works on firefox, chrome, opera, safari and edge but probably won't work on old IE browsers.</p>
<pre><code>var target = document.getElementById(&quot;mytextarea_id&quot;)

if (target.setRangeText) {
    //if setRangeText function is supported by current browser
    target.setRangeText(data)
} else {
    target.focus()
    document.execCommand('insertText', false /*no UI*/, data);
}
</code></pre>
<p><code>setRangeText</code> function allow you to replace current selection with the provided text or if no selection then insert the text at cursor position. It's only supported by firefox as far as I know.</p>
<p>For other browsers there is &quot;insertText&quot; command which only affect the html element currently focused and has same behavior as <code>setRangeText</code></p>
<p>Inspired partially by this <a href="https://www.everythingfrontend.com/posts/insert-text-into-textarea-at-cursor-position.html" rel="nofollow noreferrer">article</a></p>


blocks|key|543524|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|543525|function+insertAtCaret(text)+{
++const+textarea+=+document.querySelector('textarea')
++textarea.setRangeText(
++++text,
++++textarea.selectionStart,
++++textarea.selectionEnd,
++++'end'
++)
}

setInterval(()+=>+insertAtCaret('Hello'),+3000)|code-block|syntax|javascript|543526|<textarea+cols="60">Stack+Overflow+Stack+Exchange+Starbucks+Coffee</textarea>|543527|543528|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function insertAtCaret(text) {
  const textarea = document.querySelector('textarea')
  textarea.setRangeText(
    text,
    textarea.selectionStart,
    textarea.selectionEnd,
    'end'
  )
}

setInterval(() =&gt; insertAtCaret('Hello'), 3000)</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea cols="60"&gt;Stack Overflow Stack Exchange Starbucks Coffee&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>


blocks|key|543578|text|下面的代码是Dmitriy+Kubyshkin对https://github.com/grassator/insert-text-at-cursor包的TypeScript改编。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|543579|/**
+*+Inserts+the+given+text+at+the+cursor.+If+the+element+contains+a+selection,+the+selection
+*+will+be+replaced+by+the+text.
+*/
export+function+insertText(input:+HTMLTextAreaElement+%7C+HTMLInputElement,+text:+string)+{
++//+Most+of+the+used+APIs+only+work+with+the+field+selected
++input.focus();

++//+IE+8-10
++if+((document+as+any).selection)+{
++++const+ieRange+=+(document+as+any).selection.createRange();
++++ieRange.text+=+text;

++++//+Move+cursor+after+the+inserted+text
++++ieRange.collapse(false+/*+to+the+end+*/);
++++ieRange.select();

++++return;
++}

++//+Webkit+%2B+Edge
++const+isSuccess+=+document.execCommand("insertText",+false,+text);
++if+(!isSuccess)+{
++++const+start+=+input.selectionStart;
++++const+end+=+input.selectionEnd;
++++//+Firefox+(non-standard+method)
++++if+(typeof+(input+as+any).setRangeText+===+"function")+{
++++++(input+as+any).setRangeText(text);
++++}+else+{
++++++if+(canManipulateViaTextNodes(input))+{
++++++++const+textNode+=+document.createTextNode(text);
++++++++let+node+=+input.firstChild;

++++++++//+If+textarea+is+empty,+just+insert+the+text
++++++++if+(!node)+{
++++++++++input.appendChild(textNode);
++++++++}+else+{
++++++++++//+Otherwise+we+need+to+find+a+nodes+for+start+and+end
++++++++++let+offset+=+0;
++++++++++let+startNode+=+null;
++++++++++let+endNode+=+null;

++++++++++//+To+make+a+change+we+just+need+a+Range,+not+a+Selection
++++++++++const+range+=+document.createRange();

++++++++++while+(node+&&+(startNode+===+null+%7C%7C+endNode+===+null))+{
++++++++++++const+nodeLength+=+node.nodeValue.length;

++++++++++++//+if+start+of+the+selection+falls+into+current+node
++++++++++++if+(start+>=+offset+&&+start+<=+offset+%2B+nodeLength)+{
++++++++++++++range.setStart((startNode+=+node),+start+-+offset);
++++++++++++}

++++++++++++//+if+end+of+the+selection+falls+into+current+node
++++++++++++if+(end+>=+offset+&&+end+<=+offset+%2B+nodeLength)+{
++++++++++++++range.setEnd((endNode+=+node),+end+-+offset);
++++++++++++}

++++++++++++offset+%2B=+nodeLength;
++++++++++++node+=+node.nextSibling;
++++++++++}

++++++++++//+If+there+is+some+text+selected,+remove+it+as+we+should+replace+it
++++++++++if+(start+!==+end)+{
++++++++++++range.deleteContents();
++++++++++}

++++++++++//+Finally+insert+a+new+node.+The+browser+will+automatically
++++++++++//+split+start+and+end+nodes+into+two+if+necessary
++++++++++range.insertNode(textNode);
++++++++}
++++++}+else+{
++++++++//+For+the+text+input+the+only+way+is+to+replace+the+whole+value+:(
++++++++const+value+=+input.value;
++++++++input.value+=+value.slice(0,+start)+%2B+text+%2B+value.slice(end);
++++++}
++++}

++++//+Correct+the+cursor+position+to+be+at+the+end+of+the+insertion
++++input.setSelectionRange(start+%2B+text.length,+start+%2B+text.length);

++++//+Notify+any+possible+listeners+of+the+change
++++const+e+=+document.createEvent("UIEvent");
++++e.initEvent("input",+true,+false);
++++input.dispatchEvent(e);
++}
}

function+canManipulateViaTextNodes(input:+HTMLTextAreaElement+%7C+HTMLInputElement)+{
++if+(input.nodeName+!==+"TEXTAREA")+{
++++return+false;
++}
++let+browserSupportsTextareaTextNodes;
++if+(typeof+browserSupportsTextareaTextNodes+===+"undefined")+{
++++const+textarea+=+document.createElement("textarea");
++++textarea.value+=+"1";
++++browserSupportsTextareaTextNodes+=+!!textarea.firstChild;
++}
++return+browserSupportsTextareaTextNodes;
}|code-block|syntax|javascript|543580|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/grassator/insert-text-at-cursor^0|O|1E|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>The code below is a TypeScript adaptation of the package <a href="https://github.com/grassator/insert-text-at-cursor" rel="nofollow noreferrer">https://github.com/grassator/insert-text-at-cursor</a> by Dmitriy Kubyshkin.</p>

<pre><code>
/**
 * Inserts the given text at the cursor. If the element contains a selection, the selection
 * will be replaced by the text.
 */
export function insertText(input: HTMLTextAreaElement | HTMLInputElement, text: string) {
  // Most of the used APIs only work with the field selected
  input.focus();

  // IE 8-10
  if ((document as any).selection) {
    const ieRange = (document as any).selection.createRange();
    ieRange.text = text;

    // Move cursor after the inserted text
    ieRange.collapse(false /* to the end */);
    ieRange.select();

    return;
  }

  // Webkit + Edge
  const isSuccess = document.execCommand("insertText", false, text);
  if (!isSuccess) {
    const start = input.selectionStart;
    const end = input.selectionEnd;
    // Firefox (non-standard method)
    if (typeof (input as any).setRangeText === "function") {
      (input as any).setRangeText(text);
    } else {
      if (canManipulateViaTextNodes(input)) {
        const textNode = document.createTextNode(text);
        let node = input.firstChild;

        // If textarea is empty, just insert the text
        if (!node) {
          input.appendChild(textNode);
        } else {
          // Otherwise we need to find a nodes for start and end
          let offset = 0;
          let startNode = null;
          let endNode = null;

          // To make a change we just need a Range, not a Selection
          const range = document.createRange();

          while (node &amp;&amp; (startNode === null || endNode === null)) {
            const nodeLength = node.nodeValue.length;

            // if start of the selection falls into current node
            if (start &gt;= offset &amp;&amp; start &lt;= offset + nodeLength) {
              range.setStart((startNode = node), start - offset);
            }

            // if end of the selection falls into current node
            if (end &gt;= offset &amp;&amp; end &lt;= offset + nodeLength) {
              range.setEnd((endNode = node), end - offset);
            }

            offset += nodeLength;
            node = node.nextSibling;
          }

          // If there is some text selected, remove it as we should replace it
          if (start !== end) {
            range.deleteContents();
          }

          // Finally insert a new node. The browser will automatically
          // split start and end nodes into two if necessary
          range.insertNode(textNode);
        }
      } else {
        // For the text input the only way is to replace the whole value :(
        const value = input.value;
        input.value = value.slice(0, start) + text + value.slice(end);
      }
    }

    // Correct the cursor position to be at the end of the insertion
    input.setSelectionRange(start + text.length, start + text.length);

    // Notify any possible listeners of the change
    const e = document.createEvent("UIEvent");
    e.initEvent("input", true, false);
    input.dispatchEvent(e);
  }
}

function canManipulateViaTextNodes(input: HTMLTextAreaElement | HTMLInputElement) {
  if (input.nodeName !== "TEXTAREA") {
    return false;
  }
  let browserSupportsTextareaTextNodes;
  if (typeof browserSupportsTextareaTextNodes === "undefined") {
    const textarea = document.createElement("textarea");
    textarea.value = "1";
    browserSupportsTextareaTextNodes = !!textarea.firstChild;
  }
  return browserSupportsTextareaTextNodes;
}

</code></pre>


<p>I would like to create a simple function that adds text into a text area at the user's cursor position. It needs to be a clean function. Just the basics. I can figure out the rest.  </p>


How to insert text into the textarea at the current cursor position?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想创建一个简单的函数，将文本添加到用户光标位置的文本区域中。它需要是一个干净的函数。这只是最基本的。剩下的我会弄明白的。

问如何在当前光标位置向文本区插入文本？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在当前光标位置向文本区插入文本？EN