JSFiddle - React, Tailwind, and code Playground

by ruisoftware

HTML

<div class="noselect">this text cannot be selected</div>

<input type="text" class="noselect" value="here you can type but cannot select" >

CSS

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

input {
    margin-top: 20px;
    width: 300px;
}

JavaScript

$("input.noselect").mouseup(function () {
   $(this).removeClass("noselect").focus();
}).mousedown(function () {
    $(this).adddClass("noselect");
});