JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

Sometimes you have to <span id="selectable">eat my shorts</span> in order to get ahead.

<div id="textArea">

</div>

CSS

#selectable {
  color: gray;
}

#textArea {
  box-sizing: border-box;
  border: 1px solid black;
  max-height: calc(15em * 1.15); /* Scales it for how many list items. Could be more direct, though. */
  overflow-y: scroll;
}

#textArea ol, #textArea ul {
  margin: 0;
}

JavaScript

// http://stackoverflow.com/questions/1173194/select-all-div-text-with-single-mouse-click

function selectText() {
	var range;
  if (document.selection) {
    range = document.body.createTextRange();
    range.moveToElementText(this);
    range.select();
  } else if (window.getSelection) {
    range = document.createRange();
    range.selectNode(this);
    window.getSelection().addRange(range);
  }
}

function getById(id) { return document.getElementById(id); }

getById("selectable").addEventListener("dblclick", selectText);

function generateList() {
	var list = document.createElement("ol");
  for(var i = 0, item; i < 30; i++) {
  	item = [document.createElement("li"), document.createElement("a")];
    item[1].href = "#";
    item[1].innerHTML = i + 1;
    item[0].appendChild(item[1]);
    list.appendChild(item[0]);
  }
  list.addEventListener("dblclick", selectText);
  getById("textArea").appendChild(list);
}

generateList();