Data Application: Disabling text select in Opera

**Zanicar** · Nov 16, 2006 03:01

Hi,

I am creating a data application where users must be able to select table rows to perform actions on it... Think in terms of Yahoo Mail. I have written a script to select clicked rows and to deselect them when clicked again. I also added shift button functionality and 'escape' to deselect all.

However my problem arise with my click and drag to select multiple rows. It works fine in FF and IE, I have managed to disable text select in these browsers because it looks awry, but have not managed to achieve the same effect in Opera.

Anyone know how perhaps?

Here's my JavaScript code:

Code:

function init() {
  if (!document.getElementById) return;
  addEvent(document, 'keydown', aKeyWasPressed, false);
  addEvent(document, 'keyup', aKeyWasReleased, false);
  addEvent(document, 'mousedown', setMouseDown, false);
  addEvent(document, 'mouseup', setMouseUp, false);
  
  var browseTable = document.getElementById('browse');
  for (var i = 0; i < browseTable.rows.length; i++) {
    browseTable.rows[i].onselectstart = function() {return false;};
    browseTable.rows[i].unselectable = "on";
    browseTable.rows[i].style.MozUserSelect = "none";
    browseTable.rows[i].style.cursor = "default";
    addEvent(browseTable.rows[i], 'mousedown', selectRow, false);
    addEvent(browseTable.rows[i], 'mouseover', getMouseDown, false);
    selectedRows[i] = false;
  }
}

Thanks

**Mittineague** · Nov 16, 2006 15:13

I'm no expert so I can only offer ideas.
What are you "addEvent"ing to? Maybe the Fx and IE browsers add to "window" by default, but Opera needs "window.opera" ??
Maybe instead of having the events bubble, the "false", try having them capture, "true", instead.

**Kravvitz** · Nov 16, 2006 17:08

window.opera is only used to detect Opera and to differentiate between different versions of Opera.

I've run into this problem with Opera before and still do not know the solution. Walter Zorn seems to have solved it in this script, but I could not figure out what fixed it and he did not respond to the email I sent him asking how he did it.

**MikeFoster** · Nov 16, 2006 21:48

Try event.preventDefault() in the mousedown listener

Btw... window.opera has some other very cool uses, such as "UserJavascript"

**Kravvitz** · Nov 16, 2006 22:07

Does that work in Opera 7.x?

**MikeFoster** · Nov 16, 2006 23:02

Surely you are not still using O7 ?!?!

**Kravvitz** · Nov 16, 2006 23:45

I still test in it. Don't worry, I have Opera 8.01, 8.54, and 9.02 installed too. My primary browser is Firefox, though.

So will you answer my question now?

**MikeFoster** · Nov 17, 2006 01:18

Surprisingly, I still have a copy of O7.54. And no, this technique does not work in it.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Template</title>
<style type='text/css'>
</style>
<script type='text/javascript'>
window.onload = function()
{
  var ele = document.getElementById('unselectable');
  // This works in Opera9 and FireFox1.5, but not IE6:
  ele.onmousedown = xPreventDefault;
  // This works in IE6:
  ele.onmousemove = xPreventDefault;
  // Neither of the above work in Opera7.54
}
function xPreventDefault(e)
{
  if (e && e.preventDefault) e.preventDefault();
  else if (window.event) window.event.returnValue = false;
}
</script>
</head>
<body>

<h2>But I must explain...</h2>
<div id='unselectable'>
<p>This paragraph is <b>not</b> selectable.</p>
</div>
<h2>Sed ut perspiciatis</h2>
<p>This paragraph <b>is</b> selectable.</p>

</body>
</html>

So, together, we have definitely answered Zanicar's question

**Kravvitz** · Nov 17, 2006 01:22

At least I didn't make some silly mistake so that it wouldn't work.

I don't worry too much about it since it's an older version of Opera, but I'm still interested in hearing about it if anyone figures out how to do that in Opera 7.

**felgall** · Nov 17, 2006 14:08

Older versions of Opera don't allow you to prevent your visitor from selecting text. Most of the options to handle those types of things were added in version 8.