insert at caret instead of replace entire textarea

Question

I am modifying a third party application and within that application, I have this code:

            <?php if (!$this->allowEditor) { ?>
            $('#ticket_message').val(data.text);
            <?php } else { ?>
            jInsertEditorText(data.text, 'ticket_message');
            <?php } ?>

On the page that I need the modification, it is running the if statement. And what it currently does is replacing the content of the textarea #ticket_message but is there also a way it inserts it into the textarea without overwriting existing content.

It would be even better if it inserts it at the last location where the user stopped typing so at the caret.

For instance > TEXTAREA:

Lorem ipsum dolar sit met.

INSERT IT HERE BECAUSE THIS IS THE LAST PLACE THE TEXT CURSOR(caret) WAS SET

Lorem ipsum dolar sit met.

Maybe look at https://api.jquery.com/append/ – user3783243 Dec 20 '19 at 12:27 — user3783243, Dec 20 '19 at 12:27

Amit Sharma · Accepted Answer · 2019-12-20T13:13:59.540

you can append values

$('#ticket_message').append(new_val);

to insert at caret you can use the following function

function insertAtCaret(areaId,text) {
var txtarea = document.getElementById(areaId);
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
    "ff" : (document.selection ? "ie" : false ) );
if (br == "ie") { 
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart ('character', -txtarea.value.length);
    strPos = range.text.length;
}
else if (br == "ff") strPos = txtarea.selectionStart;

var front = (txtarea.value).substring(0,strPos);  
var back = (txtarea.value).substring(strPos,txtarea.value.length); 
txtarea.value=front+text+back;
strPos = strPos + text.length;
if (br == "ie") { 
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart ('character', -txtarea.value.length);
    range.moveStart ('character', strPos);
    range.moveEnd ('character', 0);
    range.select();
}
else if (br == "ff") {
    txtarea.selectionStart = strPos;
    txtarea.selectionEnd = strPos;
    txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}

It did not solve the problem. It only gives a direction. If your answer is fully worked out it is still only appending and not inserting at the caret. Therefore the +1 but not the solved answer. — purple11111, Dec 20 '19 at 13:04
okay fine. you can check what you need exactly here https://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery — Amit Sharma, Dec 20 '19 at 13:12
Thank you very much this is really helpful. I am wondering what did you type in to get to this answer. Because I did not find it before posting. This is a nice solution thanks again! — purple11111, Dec 20 '19 at 13:36

score 0 · Answer 2 · answered Dec 20 '19 at 14:30

While Amit Sharma gave me very useful information in my case I did need to go a different route. So depending on your need one of these answers should get you a lot closer to your result.

<?php if (!$this->allowEditor) { ?>
  var $txt = $("#ticket_message");
  var caretPos = $txt[0].selectionStart;
  var textAreaTxt = $txt.val();
  var txtToAdd = data.text;
  $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
<?php } else { ?>
  jInsertEditorText(data.text, 'ticket_message');
<?php } ?>

This code is adapted from here: https://www.codehaven.co.uk/jquery/jquery-strings/insert-text-at-cursor-position-jquery/

insert at caret instead of replace entire textarea

2 Answers2