JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<h1>Select ContentEditable Text</h1>
<div id="editable" style=" border:solid 1px #D31444" contenteditable="true">12 some text...</div>

<button>Click me</button>

CSS

h1 { 
  font-family: sans-serif;
}

JavaScript

jQuery.fn.selectText = function(){
    var doc = document;
    var element = this[0];
    console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

$("button").click(function() {
    $("#editable").selectText();
});