User-Selection - Base - Step 4

by flovogt

HTML

<html>

  <body>
    <span id="rootText">This is selectable text No.1</span>
    <div class="allowSelect">
     This is selectable text No.2
    </div>
    <div class="notAllowSelect">
     This is non-selectable text No.2
    </div>
    <button onclick="getCurrentSelection()" class="notAllowSelect">
      Get Current Selection
    </button>
  </body>

</html>

CSS

.notAllowSelect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/EdgeHTML-based Edge */
	user-select: none;           /* Non-prefixed version */
}

.allowSelect {
	-webkit-touch-callout: text; /* iOS Safari */
	-webkit-user-select: text;   /* Chrome/Safari/Opera */
	-khtml-user-select: text;    /* Konqueror */
	-moz-user-select: text;      /* Firefox */
	-ms-user-select: text;       /* Internet Explorer/EdgeHTML-based Edge */
	user-select: text;           /* Non-prefixed version */
}

JavaScript

document.body.onload = function(){
	document.getSelection().selectAllChildren(document.body);
}

function getCurrentSelection (){
	alert(document.getSelection().toString());
}