JSFiddle - React, Tailwind, and code Playground

by alexchetv

HTML

<textarea id='text' cols="40" rows="20" onblur="fakeSelection();">
</textarea>

<div id="opt">
    <input id="input" type="text" size="35">
    <input type="button" onclick='pasteIntoInput(document.getElementById("input").value)' value="button"/>

</div>

JavaScript

var storedSelectionStart = null;
var storedSelectionEnd = null;

function pasteIntoInput(text) 
{ 
        el=document.getElementById("text");
    
    el.focus();    
    if (typeof el.selectionStart == "number"&& typeof el.selectionEnd == "number") { 
    var val = el.value; 
    var selStart = el.selectionStart;
    el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd);        
    el.selectionEnd = el.selectionStart = selStart + text.length;
    } 
    else if (typeof document.selection != "undefined") {
       var textRange = document.selection.createRange();        
       textRange.text = text;       
       textRange.collapse(false);        
       textRange.select();
    } 
}  
$.fn.selectRange = function(start, end) {
  return this.each(function() {
    if(this.setSelectionRange) {
        // alert(start+"   "+end);
      this.focus();
      this.setSelectionRange(start, end);
    } else if(this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      range.moveEnd('character', end);
      range.moveStart('character', start);
      range.select();
    }
  });
};


function fakeSelection()
{
    //get selection
    el=document.getElementById("text");      
   $('#text').selectRange(el.selectionStart,el.selectionEnd);
}