How to disable text selection with css or js?

Question

Hi every body!

I am making a html/css/jquery gallery, with serveral pages.

I indeed have a "next" button, which is a simple link with a jquery click listener.

The problem is that if the user click the button serveral times, the text of the button is selected, and then the full line of text. In my really darky design, that is really ugly and nonsensical.

So here is my question: can you disable text selection on html? If not, i'll terribly miss flash and its high level of configuration on textfields... grrr :(

Thank you for your help! David

Answer 1

I'm not sure if you can turn it off, but you can change the colors of it :)

myDiv::selection,
myDiv::-moz-selection,
myDiv::-webkit-selection {
    background:#000;
    color:#fff;
}

Then just match the colors to your "darky" design and see what happens :)

Answer 2

<div style='-moz-user-select: none;-webkit-user-select: none;' onselectstart='return false;'>Blabla</div>

Works in Safari, Firefox and Internet Explorer. Should work also for Chrome but I can't check.

Answer 3

You can use JavaScript to do what you want:

if (document.addEventListener !== "undefined") {
  // Not IE
  document.addEventListener('click', checkSelection, false);
} else {
  // IE
  document.attachEvent('onclick', checkSelection);
}

function checkSelection() {
    var sel = {};
    if (window.getSelection) {
        // Mozilla
        sel = window.getSelection();
    } else if (document.selection) {
        // IE
        sel = document.selection.createRange();
    }

    // Mozilla
    if (sel.rangeCount) {
        sel.removeAllRanges();
        return;
    }

    // IE
    if (sel.text > '') {
        document.selection.empty();
        return;
    }
}

Soap box: You really shouldn't be screwing with the client's user agent in this manner. If the client wants to select things on the document, then they should be able to select things on the document. It doesn't matter if you don't like the highlight color, because you aren't the one viewing the document.