Question

我一直在寻找一个脚本，在光标位置的textarea中插入一个字符串。我发现了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>

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

尝试此功能

＆＃13;

// 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' );
})
});

＆＃13;

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

＆＃13;

<强>更新

在将span值设置为textarea之前添加? 像这样

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

相应地更新了代码。

在光标位置的textarea中插入一个字符串并进行一些更改

1 个答案: