Javascript / CSS Disable text selection

Question

I am trying to create a text button using a simple range and formatting of the text and providing onclick behavious. The problem is that the user presses the button, sometimes the button text is highlighted.

I want to avoid this behavior because it looks damn ugly when choosing text. Any css / javascript / (jquery) that I can use to avoid this?

Thanks so much for your time.

Answer 1

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

The first result on Google, by the way ...

additional

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

Answer 2

To solve CSS:

 .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 , at the end of 2013, the CSS solution is not enough, so you need to add javascript. There are good answers.

Answer 3

You can simply write:

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