How can I disable highlighting in html or JS?

Question

I need to disable the highlighting of selected text on my web app. I have a good reason for doing this and know that this is generally a bad idea. But I need to do it anyway

Answer 1

The CSS3 solution:

user-select: none;
-moz-user-select: none;

There is also a webkit prefix for the user-select, but it makes some form fields impossible to focus (could be a temporary bug), so you could go with the following pseudo-class for webkit instead:

element::selection

Answer 2

I think you're looking for the :focus pseudo class. Try this:

input:focus {
  background-color: #f0f;
}

It will give your input a pretty purple/pink color when selected.

I'm not sure which properties you have to (un)set, but I think you can find out yourself using trial and error.

Also note that the highlighting or absence thereof is browser specific!

Answer 3

I believe what you mean is selecting text (e.g. dragging the mouse across to highlight). If so, this will cancel the selection action in IE and Mozilla:

window.onload = function() {
  if(document.all) {
      document.onselectstart = handleSelectAttempt;
  }
  document.onmousedown = handleSelectAttempt;
}

function handleSelectAttempt(e) {
    var sender = e && e.target || window.event.srcElement;
    if(isInForm(sender)) {
        if (window.event) {
            event.returnValue = false;
        }
        return false;
    }
    if (window.event) {
        event.returnValue = true;
    }
    return true;
}

function isInForm = function(element) {
    while (element.parentNode) {
        if (element.nodeName.ToUpperCase() == 'INPUT'
            || element.nodeName.ToUpperCase() == 'TEXTAREA') {
            return true;
        }
        if (!searchFor.parentNode) {
            return false;
        }
        searchFor = searchFor.parentNode;
    }
    return false;
}

Answer 4

You can use the CSS pseudo class selector ::selection and ::-moz-selection for Firefox.

For example:

::-moz-selection {
    background-color: transparent;
    color: #000;
}

::selection {
    background-color: transparent;
    color: #000;
}

.myclass::-moz-selection,
.myclass::selection { ... }

Answer 5

If your ultimate goal is to make copy and paste of text more difficult, Javascript and CSS are not the right technology because you cannot disable the browser's view-source function.

Some other ideas (none of them ideal):

• a java applet (you control both display and retrieval of text)
• same in a different browser plugin (flash, silverlight, etc.)
• server-side created images (poor performance)

Answer 6

Do you mean highlighting of text when you drag your mouse over it?

Best way to do this would be using a CSS3 property called ::selection, however being CSS3 it isn't well-supported yet. Go ahead and look that up, otherwise maybe there's a way to do it with Javascript.