JSFiddle - React, Tailwind, and code Playground

by Marco Abate

HTML

<div>
    Select some text from one of the Textareas below:
</div>
<form id="frm-example" action="#" accept-charset="utf-8">
<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
This is Textarea Example One: 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
</textarea>
<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40">
This is Textarea Example Two:
Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
</textarea>
</form>
Active Element Id: <span class="output" id="output-element"></span><br/>
Selected Text: <span class="output" id="output-text"></span>

CSS

* {font-family: "monospace"; font-size:10pt;}
.output {color: #c00;}

JavaScript

$(document).ready(function () {

    function onMouseUp(e) {
        var outputElement = document.getElementById('output-element');
        var outputText = document.getElementById('output-text');
        var selectedTextArea = document.activeElement;
        var selection = selectedTextArea.value.substring(
        selectedTextArea.selectionStart, selectedTextArea.selectionEnd);
        outputElement.innerHTML = selectedTextArea.id;
        outputText.innerHTML = selection;
    }

    document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
    document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
});