How to enable and disable selecting of with JavaScript</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2014-06-05T15:35:55.167" class="fromnow">Jun 05 '14 at 15:35</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2014-06-05T16:13:41.197" datetime="2014-06-05T16:13:41.197">Jun 05 '14 at 16:13</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 4,176 times"> <span class="fc-light mr2">Viewed</span> 4,176 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="24064398" data-ownerid="2370460" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="24064398"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I was wondering how to disable and enable highlighting (text selecting) of a element with JavaScript?</p> <p>I would like something like the readonly property, where I can do</p> <pre><code>element.readOnly = true|false </code></pre> <p>only it would disable or enable the text highlighting in that field.</p> <p>Is there a way to do this?</p> <p>Thanks</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/textarea" class="post-tag js-gps-track" title="show questions tagged 'textarea'" rel="tag">textarea</a> <a href="../../questions/tagged/selection" class="post-tag js-gps-track" title="show questions tagged 'selection'" rel="tag">selection</a> <a href="../../questions/tagged/highlight" class="post-tag js-gps-track" title="show questions tagged 'highlight'" rel="tag">highlight</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jun 05 '14 at 15:35">asked Jun 05 '14 at 15:35</time> <a href="../../users/2370460/user2370460" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2370460.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="user2370460" /> </a> <div class="s-user-card--info"> <a href="../../users/2370460/user2370460" class="s-user-card--link">user2370460</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">7,470</li> <li class="s-award-bling s-award-blinggold" title="10 gold badges">10</li> <li class="s-award-bling s-award-blingsilver" title="31 silver badges">31</li> <li class="s-award-bling s-award-blingbronze" title="46 bronze badges">46</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-24064398" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="24064398" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-37131041" class="comment js-comment " data-comment-id="37131041" data-comment-owner-id="96100" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment37131041_24064398"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Why do you want to do this? There may be a better solution.</span> – <a href="../../users/96100/tim-down" title="318,141 reputation" class="comment-user ">Tim Down</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24064398/how-to-enable-and-disable-selecting-of-textarea-with-javascript#comment37131041_24064398"><span title="2014-06-06T08:41:08.063 License: CC BY-SA 3.0" class="relativetime-clean">Jun 06 '14 at 08:41</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">2 Answers<span style="display:none;" itemprop="answerCount">2</span></h2> </div> </div> </div> <a name="24064447"></a> <div id="answer-24064447" class="answer " data-answerid="24064447" data-ownerid="2138140" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="24064447"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I believe it is possible to do this with CSS/JS. Here is something that may work for you:</p> <p><strong>CSS:</strong></p> <pre><code>.unselectable { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; / Introduced in IE 10. See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ */ -ms-user-select: none; user-select: none; } </code></pre> <p>For IE less than version 10 and Opera browsers, you will need to use the unselectable attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:</p> ... <p>This property isn't inherited, so you have to put an attribute in the start tag of every element inside the . You could instead use JavaScript to do this recursively for an element's descendants:</p> <pre><code>function makeUnselectable(node) { if (node.nodeType == 1) { node.setAttribute("unselectable", "on"); } var child = node.firstChild; while (child) { makeUnselectable(child); child = child.nextSibling; } } makeUnselectable(document.getElementById("foo")); </code></pre> <p>I also found additional methods described <a href="../../questions/826782/how-to-disable-text-selection-highlighting">here</a>.</p> <p>I did find out that this method will not work in chrome: "This doesn't have any effect on content loaded as chrome". But, there is a jquery solution that is known to have better compatibility which looks like:</p> <pre><code>$('textarea') .attr('unselectable', 'on') .css('-webkit-user-select', 'none') .css('-moz-user-select', 'none') .css("-ms-user-select","none") .css("-o-user-select","none") .css("user-select",'none') .on('selectstart', false) .on('mousedown', false); </code></pre> <p>If you still run into issues with being able to select text, you can do a onselect function, unselect.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 23 '17 at 12:05">edited May 23 '17 at 12:05</time> <a href="../../users/-1/community" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/-1.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Community" /> </a> <div class="s-user-card--info"> <a href="../../users/-1/community" class="s-user-card--link">Community</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jun 05 '14 at 15:37">answered Jun 05 '14 at 15:37</time> <a href="../../users/2138140/kyle" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2138140.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Kyle" /> </a> <div class="s-user-card--info"> <a href="../../users/2138140/kyle" class="s-user-card--link">Kyle</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,339</li> <li class="s-award-bling s-award-blinggold" title="10 gold badges">10</li> <li class="s-award-bling s-award-blingsilver" title="33 silver badges">33</li> <li class="s-award-bling s-award-bling__bronze" title="67 bronze badges">67</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-24064447" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="24064447" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-37107015" class="comment js-comment " data-comment-id="37107015" data-comment-owner-id="2138140" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment37107015_24064447"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Sorry, I misunderstood the question. I have edited my answer.</span> – <a href="../../users/2138140/kyle" title="2,339 reputation" class="comment-user ">Kyle</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24064398/how-to-enable-and-disable-selecting-of-textarea-with-javascript#comment37107015_24064447"><span title="2014-06-05T15:41:56.557 License: CC BY-SA 3.0" class="relativetime-clean">Jun 05 '14 at 15:41</span></a></span> </div> </div> </li> <li id="comment-37107579" class="comment js-comment " data-comment-id="37107579" data-comment-owner-id="2370460" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment37107579_24064447"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Hi, I can't seem to get this to work. Can you show me an example?</span> – <a href="../../users/2370460/user2370460" title="7,470 reputation" class="comment-user owner">user2370460</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24064398/how-to-enable-and-disable-selecting-of-textarea-with-javascript#comment37107579_24064447"><span title="2014-06-05T15:56:33.303 License: CC BY-SA 3.0" class="relativetime-clean">Jun 05 '14 at 15:56</span></a></span> </div> </div> </li> <li id="comment-37109778" class="comment js-comment " data-comment-id="37109778" data-comment-owner-id="2138140" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment37109778_24064447"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Do you fill the data in the text box with your own data is the user entering data?\</span> – <a href="../../users/2138140/kyle" title="2,339 reputation" class="comment-user ">Kyle</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24064398/how-to-enable-and-disable-selecting-of-textarea-with-javascript#comment37109778_24064447"><span title="2014-06-05T16:58:41.893 License: CC BY-SA 3.0" class="relativetime-clean">Jun 05 '14 at 16:58</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="24064485"></a> <div id="answer-24064485" class="answer " data-answerid="24064485" data-ownerid="64157" data-score="-1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="24064485"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="-1">-1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Making it readonly does not prevent users from selecting the text. To do that, you need to bind the selectstart event on the textarea and cancel it by doing a return false;.</p> <p>Try this:</p> <pre><code><textarea onselect="return false;"></textarea> </code></pre> <p>Note that there may be some browser inconsistencies - and also the fact that this can be incredibly annoying for users ...</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2014-06-05T15:46:20.707" class="relativetime">Jun 05 '14 at 15:46</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">HaukurHaf</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jun 05 '14 at 15:39">answered Jun 05 '14 at 15:39</time> <a href="../../users/64157/haukurhaf" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/64157.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="HaukurHaf" /> </a> <div class="s-user-card--info"> <a href="../../users/64157/haukurhaf" class="s-user-card--link">HaukurHaf</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">13,522</li> <li class="s-award-bling s-award-blinggold" title="5 gold badges">5</li> <li class="s-award-bling s-award-blingsilver" title="44 silver badges">44</li> <li class="s-award-bling s-award-bling__bronze" title="59 bronze badges">59</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>