进行一些更改，将字符串插入到光标所在位置的文本区域中 [英] Insert a string in a textarea at cursor position with some changes

问题描述

我一直在寻找一个脚本来在文本区域的光标位置插入一个字符串.我遇到了Tim Down撰写的以下脚本.有人可以帮助我实施该案例吗?

I'm been searching for a script to insert a string in a textarea at the cursor position. I came across the following script by Tim Down. Can someone help me to implement it in my case.

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

I have a list of SPANs that are generated dynamically. When a user clicks on a SPAN I want the content to be inserted in the textarea at the cursor position and add a question mark at the beginning of the inserted string:

<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脚本???还是有另一种方法来完成此任务???谢谢.

How can I implement Tim's Javascript into my codes??? Or is there another way to accomplish this task??? Thanks.

推荐答案

尝试使用此功能

// 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之前添加?像这样

Add ? just before you set span value to textarea like this

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

具有相应的更新代码.

这篇关于进行一些更改，将字符串插入到光标所在位置的文本区域中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！