Disable text select with JavaScript and/or CSS

Question

I am trying to create a text button using simple span and formatting the text and providing onclick behaviour. The problem is when a user clicks on the button, it sometimes highlights the text of the button.

I want to avoid such behaviour, because it looks damn ugly when the text is selected. Is there any CSS/JavaScript/(jQuery) content I can use to avoid this?

I see and smile when all mentions of javascript are suffixed by "jquery". Sometimes I feel that the community is getting out of touch with legacy javascript. — jrharshath
– jrharshath, Commented May 28, 2009 at 9:54
possible duplicate of CSS rule to disable text selection highlighting — Dan
– Dan, Commented Jul 18, 2013 at 8:57

Ropstah · Accepted Answer · 2009-05-28 09:53:21Z

6

spanid.onselectstart = function() {return false;} // ie
spanid.onmousedown = function() {return false;} // mozilla

First result on Google by the way...

extra

$('#spanid').selectstart(function(event) {
  event.preventDefault();
});

answered May 28, 2009 at 9:53

Ropstah

17.9k27 gold badges123 silver badges199 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jrharshath Over a year ago

+1 for such a simple solution :) I didn't realize it would be this simple

Dan · Accepted Answer · 2013-07-18 12:39:29Z

5

For a CSS solution:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none; /* Isn't Konquerour dead? */
    -moz-user-select: -moz-none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

But, looking here, CSS solution is not enough in late 2013, so you should add some javascript. There are good answers around.

edited Jul 18, 2013 at 12:39

Dan

58.2k44 gold badges125 silver badges162 bronze badges

answered Apr 3, 2011 at 2:00

tlrobinson

2,8584 gold badges33 silver badges36 bronze badges

Comments

Egoulet · Accepted Answer · 2010-04-30 17:58:28Z

1

You can just write:

$('#spanid').disableSelection();

answered Apr 30, 2010 at 17:58

Egoulet

632 silver badges5 bronze badges

1 Comment

dwaz Over a year ago

just to clarify, this requires jquery library.

Collectives™ on Stack Overflow

Disable text select with JavaScript and/or CSS

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related