JSFiddle - React, Tailwind, and code Playground

by icoxfog417

HTML

<div id="grid-select-cleared" class="grid" >
    <div id="sink1" tabindex="0" class="hidden"></div>
    <div class="cell">
        Please Select Text Here / Selection will cleared
    </div>
</div>
<hr/>
<div id="grid-select-keeped" class="grid" >
    <div id="sink2" tabindex="0" class="hidden"></div>
    <div class="cell">
        Please Select Text Here /Selection will keeped
    </div>    
</div>

CSS

.grid{
    position:relative;
    height:20px;
    overflow: hidden;
}
.cell{
    position:absolute;
    top:2px;
    left:2px;
}

.hidden{
    position:fixed;
    width:0;
    height:0;
    top:0;
    left:0;
    outline:0;
}

JavaScript

$(function(){  
  $("#grid-select-cleared")
  .click(function(){
    $("#sink1")[0].focus();
    console.log("focus is on " + $(":focus")[0].outerHTML)
    try{
      console.log(getTextSelection().toString())
    }catch(e){
      console.log("!no-selection!")
    }
  })

  $("#grid-select-keeped")
  .click(function(){
    var selection = getTextSelection();
    $("#sink2")[0].focus();
    setTextSelection(selection);
    console.log("focus is on " + $(":focus")[0].outerHTML)
    console.log(getTextSelection().toString())
  })
    
  //function for getting selection
  function getTextSelection(){
    var selection = null;
    if (window.getSelection) {
      selection = window.getSelection().getRangeAt(0);
    }
    return selection;
  }
    
  function setTextSelection(selection){
    if (window.getSelection && selection) {
      var target = window.getSelection();
      target.removeAllRanges();
      target.addRange(selection)
    }
  }
    
})