Preventing text selection (Mozilla Firefox)

[Shenker]

Hi,

I'd need some way to prevent users from selecting text in a web page. I'm only interested in Mozilla Firefox family browsers.

I came with this javascript snippet so far:

onmousedown = "return false;"

This works, but it has the problem of disabling inputs too, so the user won't be able to enter them with his pointer.

Does anybody know of a better way to avoid text selection in the whole page while still keeping the other elements working?

Thanks a lot

[Atli]

Could you tell us why you want to do this? If you are trying to prevent visitors from copying your content, that's not possible. You may be able to prevent them from selecting it under normal circumstances, but that is extremely easy to work around.

However, the most reliable way I can think of is to cover whatever text you want disabled with another, empty and transparent element. That way when visitors try to select the text, they will be clicking the transparent element rather then the text below. - I say this is most reliable because it dose not require JavaScript. Can be done using HTML and CSS alone.

Your onmousedown = "return false;" method can also be applied more specifically to text elements alone. That is, you could do something like this:
[code=javascript]
var paragraph = document.getEle mentById('myPar agraph');
paragraph.onmou sedown = function() { return false; }
[/code]
This would disable mouse interaction on the element with the ID 'myParagraph' and nothing else.

You can of course use things like the document.getEle mentsByTagName function to target more than a single element at a time. Just make sure the elements you target do not contain elements that visitors should be able to interact with.

Note, though, that this a JavaScript solution and can VERY easily be bypassed.

[Shenker]

Thanks, Atli. I know it's very easy to bypass it, but it's intended to work in a controlled environment, where users are seeing html documents in a custom application with an embedded browser which offers no control over javascript execution.

I'd rather want a more general way of applying the function instead of selecting it's receivers by id because I don't know which structure the documents will have.

[hsriat]

Not the perfect solution, but try this...

function disableTextSelect(node) {
  node = node || document.body;
  if (node.nodeType != 1) return;
  if (node.getElementsByTagName('input').length + node.getElementsByTagName('textarea').length) {
    for (var i = 0; i < node.childNodes.length; i++) {
      if (!node.childNodes[i].nodeName.match(/^(input|textarea)$/i)) disableTextSelect(node.childNodes[i]);
    }
  }
  else {
    node.onmousedown = function() {
      return false;
    };
  }
}
disableTextSelect();

Dynamically added elements may give trouble.

[Shenker]

Thanks, hsriat!

Your solution works fine. The only way I noticed you could actually select any text with it was dragging your mouse from an empty area to a text paragraph.

Then I modified your function a bit so to block mousedown by default on document's body and then allow inputs/textareas to accept it. The key here was the "event.stopProp agation()" function ;-)