ansaurus

Question

Any way to prevent "deselection" of highlighted text?

Answer 1

+1 A:

This behavior, while mostly universal in modern browsers, is browser/implementation specific and almost completely unrelated to CSS or Javascript. In particular, note that Firefox maintains separate selection states for the page at large and the contents of text boxes, while IE does not do this. Even worse, consider text-mode browsers with separate mouse and keyboard selection interfaces.

Sparr 2009-01-28 03:54:46

Thanks for your input. I realize that browsers handle text selection differently... just like they handle loads of other things differently. This doesn't make it impossible, just challenging.

sam 2009-01-28 04:32:55

Answer 2

+2 A:

This works for me on Firefox, haven't tried IE though. Try clicking on the foo.style.preventDeselect = "true"; line when you have text selected. Uses the mousedown event.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
</head>
<script>
$(document).ready(function() {
    $('#test').mousedown(function() {
        return false;
    });
});
</script>
<body>

Highlight some text on this webpage, then click basically anywhere on the document. Your selection will disappear.<br><Br>

Is there a way to prevent this behavior when the user clicks on a specific element, either by CSS or Javascript?<br><Br>

E.g.:<br><Br>

var element = document.getElementById("foo");<br>
foo.onclick = function(e){<br>
   //some magic here that prevents deselection from occuring<br>
}<br><Br>

or<br><Br>

<span id='test'>foo.style.preventDeselect = "true";</span><br><Br>

Thanks!<br><Br>

</body>
</html>

Paolo Bergantino 2009-01-28 03:56:01

This works, but unfortunately disables the "onclick" event which I need. Maybe "preventDefault()" comes into play...

sam 2009-01-28 04:14:44

onclick still works for me. Where do you need it?

Paolo Bergantino 2009-01-28 04:17:28

I was wrong.. onclick works. Unfortunately, "return false" in IE still unselects text. Strangely enough, though, if you throw an error "onmousedown" text is not deselected

sam 2009-01-28 04:18:51

Well I've been trying different things for the past 30 minutes and I can't get anything to work on IE (short of error throwing or using an alert onmousedown =p) so I leave you with this. Good luck.

Paolo Bergantino 2009-01-28 04:33:43

Thanks for the effort :) I edited my post.. perhaps it's possible to remember the selection, then after mouseclick, restore it?

sam 2009-01-28 04:36:39

Thats what I was thinking, but thats going down a slope I don't want to get into.

Paolo Bergantino 2009-01-28 04:40:41

I hear ya... ranges and the like are not fun. I think I might actually opt for the the error on IE. Do people even notice it?

sam 2009-01-28 04:43:23

Answer 3

A:

"return false" as well as "e.preventDefault()" in onmousedown works in FF and Safari, but not IE. The only solution for IE, as far as I can tell, is to throw an error.

This works in all browsers (but causes an error in IE, since preventDefault is not a method):

//clicking the 'test' element will not deselect text.
var test = document.getElementById("test");
test.onmousedown = function(e){
  e = e || window.event;
  e.preventDefault();
}

I'd still like to do this error-free in IE, if possible

Thanks to Paolo Bergantino for the the "onmousedown" tip.

sam 2009-01-28 04:26:15

Answer 4

+1 A:

What about

if(e.preventDefault) 
    e.preventDefault();
else
    e.returnValue = false;

Luca Matteis 2009-01-28 05:26:08

This still deselects text in IE

sam 2009-01-28 15:10:08

Answer 5

A:

Just in case somebody checks this out, I had a similar problem. I needed to run some javascript on a piece of selected text that was fired by clicking on a toolbar button (span with background-image). I solved my problem by changing the spans to anchors with an href of "javascript:void(0)". That prevented my selected text from being deselected.

Kerby 2009-09-14 14:09:18

Answer 6

A:

Hello there, the best way that I figured out how to do this is, for IE you need to setup a listener on 'onselectstart'. For Mozilla and other browsers you can do on 'mousedown'. This will only work, if you don't use 'mousedown' in any other portion of your site!

Snippet: YUI way: FF browser:

YAHOO.util.Event.addListener(window, 'mousedown', function(evt) { YAHOO.util.Event.preventDefault(evt); });

IE Browser: In IE you are not allowed to set this listener on window, since in IE it doesn't work. best thing to do is on your body element set a class element, then reference it, and apply the listener to that element object.
// Get the element by class and assign to var bar YAHOO.util.Event.addListener(bar, 'selectstart', function(evt) { YAHOO.util.Event.preventDefault(evt); });

if you want to do it the easy way, just do

window.onMouseDown = function() {return false;}

or for IE

body.onSelectStart = function() {return false;}

Hope this helps.

ericg 2010-01-21 22:19:36

ansaurus

tags:

views:

answers:

Any way to prevent "deselection" of highlighted text?

related questions