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?

TypeScript

jQuery

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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