How to click a div that has text in it without highlighting/selecting the text

Question

Possible Duplicate:
What is the best way to prevent highlighting of text when clicking on its containing div in javascript?

I'm building my own simple counter with + and - text buttons (divs). I have it where it does a .focus() on another div, the .countDisplay which should take the focus off of the count buttons. Best by example: http://jsbin.com/uxewej/2/edit If you click the + button a few times consecutively, it sometimes looks like this:

enter image description here

Is there a way to prevent the text from being selected/highlighted like that if the user clicks either of the buttons in succession? Thanks!

There are threads on this already: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting. — Alexander Wallin, Feb 01 '13 at 20:46
Would it be possible to just make them images and text-align the real + and - off to the side? — gotohales, Feb 01 '13 at 20:47
@afEkenholm sorry you was 100% right, `disableSelection` is jquery UI. — Peter, Feb 01 '13 at 20:51
http://stackoverflow.com/questions/2700000/how-to-disable-text-selection-using-jquery — Peter, Feb 01 '13 at 21:21
I've tried all of these suggestions (including using buttons), to no avail on an android phone using Chrome browser :( — Ian Davis, Feb 04 '13 at 18:11

score 2 · Answer 1 · edited May 23 '17 at 11:59

You can do the trick using CSS : http://jsbin.com/uxewej/8/

html{
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

Do not use html CSS selector if you need to let the user select something.

Update

Tested with FF, Chrome and IE9

Generic solution in complement of CSS declarations

function toggleEnableSelectStart(enable) {
    document.onmousedown = function (e) { return enable; };
    document.onselectstart = function (e) { return enable; };
}

jQuery(document).ready(function () {
    //Disable default text selection behavior
    toggleEnableSelectStart(false);

    //Let inputs text selection possible
    jQuery("input[type=text]").focusin(function () { toggleEnableSelectStart(true); });
    jQuery("input[type=text]").mouseover(function () { toggleEnableSelectStart(true); });
    jQuery("input[type=text]").focusout(function () { toggleEnableSelectStart(false); });
    jQuery("input[type=text]").mouseout(function () { toggleEnableSelectStart(false); });
});

Sorry about the author, I don't remember where I found that one day, but it is clever!

Update 2

To avoid the clicking selection behavior only on your button, remove the CSS tricks and use

http://jsbin.com/uxewej/11/edit

function toggleEnableSelectStart(enable) {
    document.onmousedown = function (e) { return enable; };
    document.onselectstart = function (e) { return enable; };
}

jQuery(document).ready(function () {
//Disable default text selection behavior
toggleEnableSelectStart(false);

//Let inputs text selection possible
jQuery(".countButton").focusin(function () { toggleEnableSelectStart(false); });
jQuery(".countButton").mouseover(function () { toggleEnableSelectStart(false); });
jQuery(".countButton").focusout(function () { toggleEnableSelectStart(true); });
jQuery(".countButton").mouseout(function () { toggleEnableSelectStart(true); });
});

Update 3

If you want to disable selection on selected element follow this link

(function($){
    $.fn.disableSelection = function() {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
    };
})(jQuery);

I don't understand why you would go this far, when changing the tag to the semantically more correct button tag solves this problem anyway. Your solution works, of course, I just don't get it. — pentzzsolt, Feb 01 '13 at 21:08

score 1 · Answer 2 · answered Feb 01 '13 at 20:43

1

I'd personally use button tags instead of span, it makes more sense semantically and just works better for this scenario as well. And of course solves your problem.

answered Feb 01 '13 at 20:43

pentzzsolt

1,001
1
9
18

I was pretty excited about this idea, but, it still selects the button on an android phone using Chrome :/ – Ian Davis Feb 04 '13 at 18:12
Oh boy, can't keep up with all these devices. :( – pentzzsolt Feb 07 '13 at 15:59

score 1 · Answer 3 · answered Feb 01 '13 at 20:44

1

You just have to disable text selection. jQuery can do this, and it should be cross-browser:

$(".countButton").attr("unselectable", "on")
.on("selectstart", false)
.css("user-select", "none");

answered Feb 01 '13 at 20:44

Vianney Dupoy de Guitard

2,254
1
14
10

How to click a div that has text in it without highlighting/selecting the text

3 Answers3