Insert a string in a textarea at cursor position with some changes

Question

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.

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>

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();
}
}

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

If you just want to insert the text in the textarea then implement on click event and in that event get the old value of the textarea and append the new value and then insert that to the textarea. — Mahesh, Mar 05 '15 at 08:44
Yes I want to insert the text in the textarea and add a question mark to the start of the inserted text..... — Gloria, Mar 05 '15 at 08:46
Do you use jQuery? http://stackoverflow.com/questions/946534/insert-text-into-textarea-with-jquery/946556#946556 — Mox Shah, Mar 05 '15 at 08:48
then check above answer, its working fine, Have implemented in fiddler. — Mox Shah, Mar 05 '15 at 08:52

Mox Shah · Accepted Answer · 2015-03-05T10:09:55.713

Try this function

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

UPDATE

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

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

Have updated code accordingly.

Wonderful.. Thanks.. But how can I add a question mark to the start of the inserted string??? — Gloria, Mar 05 '15 at 09:07
Thanks, You may mark it as answered if it helps you to resolve your issue :). — Mox Shah, Mar 05 '15 at 09:13
Moksh Shah Plz see my answer below. Your solution is great but I can't make it work on my aspx page... Am I missing something? — Gloria, Mar 05 '15 at 09:41

Insert a string in a textarea at cursor position with some changes

1 Answers1

Linked