User-Select: Advanced Scenario

by flovogt

HTML

<body>
    <span id="rootText">This is selectable text No.1</span>
     <div class="notAllowSelect">
     This is non-selectable text No.1
    </div>
    <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>

CSS

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

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

JavaScript

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