Non selectable text in html table ?

Question

Question: I abuse a table as list of buttons, using the onclick even on each cell.
The problem is, the buttons are zoom buttons, and on clicking repeatedly too fast (doubleclick) you select the button (=table cell) text (even if you don't want to) and that looks odd.
Can I switch that off ? Can I make text in a table non-selectable ?

Answer 1

Yes, if you make it a proper button. You can style the button just as you can style a table cell:

.button {
 background-color:blue;
 color:red;
 border:4px solid green;
}

<input type="button" class="button" value="MyButton" />

You can still put it in a table if you want to (repent, sinner!), but at least make a button a button. ;)

If you want it to automatically fill the width of the table cell, set the button to display:block;

Answer 2

Sorry, no longer relevant.

I searched along the lines of a css way to do it. but the best i found was
http://www.tek-tips.com/viewthread.cfm?qid=1184318&page=1

It turned out I actually need to add a JS eventhandler:

onselectstart="javascript: return(false);"

The above works for IE and Chrome. But then, you still need to translate it for FireCrap:

onselectstart="return false;"
onmousedown="if (typeof event.preventDefault != 'undefined') {event.preventDefault();}"

Answer 3

To answer your original question... To prevent a user from being able to highlight text on a page, apply the following CSS rules:

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

Answer 4

In IE, you can do

<td unselectable="on">...</td>

Sadly you can't just put unselectable="on" in the <table> tag: unselectable doesn't get inherited, meaning you have to put an attribute in the start tag of every cell. If this is a problem and JavaScript is an acceptable solution, you could write some JavaScript to do this recursively for an element's descendants.

For other browsers, there is CSS for this:

*.unselectable {
    user-select: none; /* CSS3 */
    -moz-user-select: none;
    -khtml-user-select: none;
}

Answer 5

You can set the focus on the TD when the onclick event is triggered.
Here's an example with a DIV but the same apply to a TD.

<div onclick="clicked(this);">clicks:</div>
<script>
function clicked(div){
    div.innerHTML += '*';
    div.focus();
}
</script>