JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/11559582/inserting-html-at-cursors-position-and-moving-cursor-to-end-of-inserted-html-wit

by RASG

HTML

<div id="formcontainer">
        <button id="btnpastepre">click to paste</button>
        
        <form id="formulario">
            <textarea id="txtarea" cols=60 rows=20></textarea>
        </form>
    </div>

JavaScript

jQuery.fn.extend({
        insertAtCaret: function(myValue){
          return this.each(function(i) {
            if (document.selection) {
              //For browsers like Internet Explorer
              this.focus();
              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();
            }
          })
        }
    });
    
    var myhtml = '<b> this html will be <i>added</i> to the </b> cursor position (and will move to the end)';
    var movetotheendof = '';
    $(window).load(function(){
        $('#btnpastepre').click(function() {
            $('#txtarea').insertAtCaret(myhtml)
            movetotheendof = $('#txtarea').val()
            $('#txtarea').val("").val(movetotheendof)
        })
    });