javascript - 在光标位置的文本区域中插入一个字符串并进行一些更改

Question

我一直在寻找一个脚本来在光标位置的文本区域中插入字符串。我看到了蒂姆·唐 (Tim Down) 的以下剧本。有人可以帮助我在我的案例中实现它吗？

我有一个动态生成的 SPAN 列表。当用户单击 SPAN 时，我希望将内容插入到光标位置的文本区域中，并在插入的字符串的开头添加一个问号:

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

solution by 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 的 Javascript 实现到我的代码中？？？或者还有其他方法来完成这个任务吗？？？谢谢。

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>

更新

在将跨度值设置为文本区域之前添加?像这样

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

已相应更新代码。