進行一些更改，將字符串插入到光標所在位置的文本區域中

Question

我一直在尋找一個腳本來在文本區域的光標位置插入一個字符串。 我遇到了Tim Down撰寫的以下腳本。 有人可以幫助我實施該案例嗎？

我有一個動態生成的SPAN列表。 當用戶單擊SPAN時，我希望將內容插入到光標所在位置的textarea中，並在插入的字符串的開頭添加一個問號：

<span class="spanClass" id="span1">String1</span>//onclick insert String1 into teaxarea as ?String1
<span class="spanClass" id="span2">String2</span>//onclick insert String2 into teaxarea as ?String2
<span class="spanClass" id="span3">String3</span>//onclick insert String3 into teaxarea as ?String3
<span class="spanClass" id="span4">String4</span>//onclick insert String4 into teaxarea as ?String4
<span class="spanClass" id="span5">String5</span>//onclick insert String5 into teaxarea as ?String5
<span class="spanClass" id="span6">String6</span>//onclick insert String6 into teaxarea as ?String6

...

<textarea id="spanString"></teaxtarea>

Tim Down的解決方案

function insertTextAtCursor(el, text) {
var val = el.value, endIndex, range;
if (typeof el.selectionStart != "undefined" && typeof el.selectionEnd != "undefined") {
    endIndex = el.selectionEnd;
    el.value = val.slice(0, el.selectionStart) + text + val.slice(endIndex);
    el.selectionStart = el.selectionEnd = endIndex + text.length;
} else if (typeof document.selection != "undefined" && typeof document.selection.createRange != "undefined") {
    el.focus();
    range = document.selection.createRange();
    range.collapse(false);
    range.text = text;
    range.select();
}
}

如何在代碼中實現Tim的Java語言？？？ 還是有另一種方法來完成此任務？？？ 謝謝。

Answer 1

試試這個功能

 // We've extended one function in jQuery to use it globally. $(document).ready(function(){ jQuery.fn.extend({ insertAtCaret: function(myValue){ return this.each(function(i) { if (document.selection) { //For browsers like Internet Explorer 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 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(); } }); } }); $('#spanString').val(""); $("span").click(function(){ $('#spanString').insertAtCaret("? " + $("#"+this.id).html()); }); $('button').click(function(){ $('#spanString').insertAtCaret( '12365' ); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="spanClass" id="span1">String1</span> <span class="spanClass" id="span2">String2</span> <span class="spanClass" id="span3">String3</span> <span class="spanClass" id="span4">String4</span> <span class="spanClass" id="span5">String5</span> <span class="spanClass" id="span6">String6</span> <textarea id="spanString"></textarea> 

更新

加? 就在您將span值設置為textarea之前

$('#spanString').insertAtCaret("? " + $("#"+this.id).html());

相應地更新了代碼。