2

I have the following annoying problem: When clicking multiple times on empty spaces in my website, it selects entire rows and paragraphs, as demonstrated by this fiddle.

But since there is no text under the cursor (e.g. the empty green region), I don't even understand why it would want to select anything in the first place.

Simply put: If I click on text, I want default selection behavior, but if I do not click on text, it should not select anything. Is that possible?

Reference HTML code:

<div>
    <span>Clicks:</span> <input id="clicks" value="0"></input>

    <div style="background-color:LightGreen"
        onclick="$('#clicks').val(parseInt($('#clicks').val()) + 1);"><span class="hard">CLICK THE GREEN AND CLICK IT HARD!</span>
    <br/>
       <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS5lQfEXNPKzMGZRHUQJJJj97NFoi1Q4iZ_dT1GK9lrYsjrgd7i5XWsrTA"></img>
       <div style="width: 100%; display:inline-block"><span>more text</span></div>
    </div>
    <span>even more text</span>

    <p id="log"></p>
</div>
Domi
  • 22,151
  • 15
  • 92
  • 122

1 Answers1

5

We can solve this with CSS' user-select.

Try out the solution in this fiddle.

We first disable overall text-selection, like so:

/**
 * Disallow selection for the entire site.
 */
body {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */ 
}

And then, we take a good look at the set of all HTML elements, and white-list all text-only elements, like so:

/**
 * White-list all of HTML5's "pure text" elements.
 * @see http://www.w3schools.com/tags/
 */
 a, abbr, address, b, bdi, bdo, blockquote, br, button, caption, center, 
 cite, code, col, dd, del, dfn, dt, em, figcaption, footer, h1, h2, h3, h4, 
 h5, h6, i,  input, ins, kbd, label, legend, mark, output, p, pre, q, rp, rt, 
 ruby, s,  samp, small, span, strike, strong, sub, summary, sup, td, textarea, 
 th, time,  title, tt, u, var {
    -webkit-user-select: text; /* webkit (safari, chrome) browsers */
    -moz-user-select: text; /* mozilla browsers */
    -khtml-user-select: text; /* webkit (konqueror) browsers */
    -ms-user-select: text; /* IE10+ */
 }

This way, the user can still select text, but will not accidentally select empty spaces. If you find any text that is not selectable, just wrap it in a <span>.

Domi
  • 22,151
  • 15
  • 92
  • 122
  • 4
    You just asked a question and you just answered it? why? – Vangel Tzo Nov 25 '14 at 12:01
  • 1
    @VangelTzo Let me refer you to [the official SO blog](http://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/): "To be crystal clear, it is not merely OK to ask and answer your own question, it is explicitly encouraged." - In my case, I heard of this problem when talking to a friend many months ago, and today I also came across this problem and I was able to solve it. My friend thought, it was a good solution. I am guessing, many other people have a similar problem... – Domi Nov 25 '14 at 12:02
  • 1
    I didn't knew about that, you are free to post it since it's valid to SO rules ;) – Vangel Tzo Nov 25 '14 at 12:06
  • @VangelTzo I get it - A lot of people (judging from the amount of upvotes of your comment) are not happy with people doing this because they think, it's some sort of rep-farming. Seeing how this question is actually a duplicate (as it turns out; I did not know that!), I agree that things look fishy here. :P – Domi Nov 25 '14 at 12:11
  • 1
    @Domi since this question has been asked before, I suggest you flag this question for moderator's attention, and request a merge. This will move your answer to the canonical question, so that it can be seen :) – Madara's Ghost Nov 25 '14 at 12:15
  • But you can ctrl+a and highlight the content right..? how to prevent that..? – Pabodha Wimalasuriya Feb 26 '19 at 11:14
  • @PabodhaWimalasuriya I would suggest using a library like [Hotkeys.js](https://github.com/jaywcjlove/hotkeys), add an event handler and `preventDefault()` :) – Domi May 28 '19 at 12:36