Prevent text selection on dbl click

Question

I need to prevent text selection on double click. But the text should be still selectable on mouse drag. Is it possible?

If I try to remove selection on dblclick or mouseup it flashes (like in this jsfiddle) what is not desirable as well.

UPD: I don't need to disable selection completely; I only want to disable it on double click.

Check out http://stackoverflow.com/questions/69430/is-there-a-way-to-make-text-unselectable-on-an-html-page — Mr Br, May 26 '15 at 06:34

score 1 · Answer 1 · answered May 26 '15 at 06:34

1

Try this out:- http://jsfiddle.net/adiioo7/z2kpcwb6/2/

HTML:-

<h2>Try to select me</h2>

<div id="foo" unselectable="on">dljafdlhjafdbdfasjhadsfh adfsjlfhads h jkfkaj fjf ajksfhajks afjk sdhfkj asfadks jfsdjf kjasdhf kjasdh fkjasdfk jadskjfhakdsjf kajsdf kjah kfjas kdjfads</div>

CSS:-

#foo {
   -moz-user-select: -moz-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;
}

answered May 26 '15 at 06:34

Aditya Singh

9,512
5
32
55

@odedta Does this answer your query? – Aditya Singh May 26 '15 at 06:37
I didn't post the question, in any case, this seems like a viable solution to me. :) – odedta May 26 '15 at 06:38
This is a CSS3 property. Please find the browser support here https://css-tricks.com/almanac/properties/u/user-select/ – Arasu RRK May 26 '15 at 06:49
@In case you are targetting old browser use jQuery `.disableSelection()` – Aditya Singh May 26 '15 at 07:01
Thanks, but I don't need to disable selection completely – Taras Hupalo May 26 '15 at 07:04

score 1 · Answer 2 · answered May 26 '15 at 06:56

1

I would say there is no css solution for this, because there is no way to block only the doubleclick selection, but let the text be selectable over drag. You can however completely block the selection with css user-select:none;

However you could check in javascript for the doubleclick event and then remove the selection with window.getSelection().empty();

answered May 26 '15 at 06:56

Jakub Juszczak

7,126
3
21
38

Yes, I can remove selection on `doubleclick` (as I mentioned in my post) but it flashes – Taras Hupalo May 26 '15 at 07:01

score 0 · Answer 3 · answered May 26 '15 at 06:34

0

Use this pseudo-selector when ever you need in your code:

::selection {
    background: transparent;
    color: initial;
}

answered May 26 '15 at 06:34

odedta

2,430
4
24
51

score 0 · Answer 4 · answered May 26 '15 at 06:36

This JavaScript solution should work in all browsers:

<div onselectstart="return false">your text</div>

Or you can use a css solution that works in most browsers:

.not-selectable {
    -webkit-user-select: none;    
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Note: If I remember correctly, the css solution doesn't work in most mobile browsers.

Prevent text selection on dbl click

4 Answers4

Try this out:- http://jsfiddle.net/adiioo7/z2kpcwb6/2/