How can I quickly select all text except CSS tags?
August 28, 2004 12:42 PM Subscribe
S'there any quick CSS-based way to prevent text from being selected?
I'm building a Web application and attempting to take advantage of Javascript's onDblClick event. When applied to a <div>, everything works as expected, but double-clicking frequently selects all of the text within the <div>. In Opera 7, it even triggers a context menu. In an otherwise smooth user experience, this looks rather shite.
I'm looking for a simple, cross-browser CSS means of prevent text from being selected. In the absence of such a beast, I've attempted the following:
1. Put the text in one <div> and position another empty <div> over it with a higher z-index, attaching the mouse events to the overlaid box. This works perfectly in Mozilla, Firefox, and IE6. Opera still selects the text (despite the fact that it's in a wholly separate structure) and spawns the menu, which immediately disappears. Even if this method did work, I'm effectively doubling the number of <div>s in what feels like a kludge and a violation of the CSS ethos.
2. Create a form named "nullform" and a hidden field named "nullfield", and call document.nullform.nullfield.focus() in the onDblClick handler. Though this performs similarly in every browser, the result is the text being selected for half a second before being deselected. Still ugly, still a kludge.
So, what say ye, MetaFilter mavens of all things technical? Am I imprisoned on a train speeding toward Crapville, or is there a pleasant end to this calamity?
I'm building a Web application and attempting to take advantage of Javascript's onDblClick event. When applied to a <div>, everything works as expected, but double-clicking frequently selects all of the text within the <div>. In Opera 7, it even triggers a context menu. In an otherwise smooth user experience, this looks rather shite.
I'm looking for a simple, cross-browser CSS means of prevent text from being selected. In the absence of such a beast, I've attempted the following:
1. Put the text in one <div> and position another empty <div> over it with a higher z-index, attaching the mouse events to the overlaid box. This works perfectly in Mozilla, Firefox, and IE6. Opera still selects the text (despite the fact that it's in a wholly separate structure) and spawns the menu, which immediately disappears. Even if this method did work, I'm effectively doubling the number of <div>s in what feels like a kludge and a violation of the CSS ethos.
2. Create a form named "nullform" and a hidden field named "nullfield", and call document.nullform.nullfield.focus() in the onDblClick handler. Though this performs similarly in every browser, the result is the text being selected for half a second before being deselected. Still ugly, still a kludge.
So, what say ye, MetaFilter mavens of all things technical? Am I imprisoned on a train speeding toward Crapville, or is there a pleasant end to this calamity?
While you're at it, disable right click too.
posted by angry modem at 1:06 PM on August 28, 2004
posted by angry modem at 1:06 PM on August 28, 2004
Come to the light, Danelope.
posted by Pretty_Generic at 1:08 PM on August 28, 2004
posted by Pretty_Generic at 1:08 PM on August 28, 2004
No matter what you do in CSS, savvy users will steal your text with, e.g., wget or lynx.
You should insead replace all text with images. Be sure to warp the text and add noise, to foil OCR.
posted by Eamon at 1:15 PM on August 28, 2004
You should insead replace all text with images. Be sure to warp the text and add noise, to foil OCR.
posted by Eamon at 1:15 PM on August 28, 2004
Response by poster: While you're at it, disable right click too.
evil.
No matter what you do in CSS, savvy users will steal your text with, e.g., wget or lynx.
If any of you had actually bothered to read the question, you might have noticed that I'm not looking for this solution in an ill-guided attempt to prevent others from stealing content. Having been working on the Web since 1994, I'm well-aware of the futility of such an attempt. I am, in fact, trying to prevent text within the navigation of a Web-based application (read: buttons) from being mistakenly selected during the course of normal usage.
Thanks for your contribution, however.
posted by Danelope at 1:19 PM on August 28, 2004
evil.
No matter what you do in CSS, savvy users will steal your text with, e.g., wget or lynx.
If any of you had actually bothered to read the question, you might have noticed that I'm not looking for this solution in an ill-guided attempt to prevent others from stealing content. Having been working on the Web since 1994, I'm well-aware of the futility of such an attempt. I am, in fact, trying to prevent text within the navigation of a Web-based application (read: buttons) from being mistakenly selected during the course of normal usage.
Thanks for your contribution, however.
posted by Danelope at 1:19 PM on August 28, 2004
Maybe double-click is just the wrong way to go. That's not exactly common on web apps.
posted by smackfu at 1:32 PM on August 28, 2004
posted by smackfu at 1:32 PM on August 28, 2004
Response by poster: It's a Web implementation of a traditional software app, however, wherein double-clicking is an expected behavior. Making it work like a desktop application would (theoretically) prevent the cognitive dissonance associated with said transition.
posted by Danelope at 1:40 PM on August 28, 2004
posted by Danelope at 1:40 PM on August 28, 2004
I have to agree with Danelope. In fact, I often notice novice internet users double-clicking EVERY web link as they surf.
posted by travis vocino at 2:10 PM on August 28, 2004
posted by travis vocino at 2:10 PM on August 28, 2004
double-clicking is an expected behavior
Unless, of course, your user has h/h machine set up to single-click. We are legion.
posted by sageleaf at 2:19 PM on August 28, 2004
Unless, of course, your user has h/h machine set up to single-click. We are legion.
posted by sageleaf at 2:19 PM on August 28, 2004
You can probably make this happen with positioning. Browsers (even the ever-wonderful Moz) have trouble with text in absolutely-positioned elements (selection tends to be an all-or-nothing affair). And if you were to lay something like a transparent gif (blech, I know, but stay with me) in an absolutely-positioned div that was on top of the whole element whose text you wanted to keep from being selected, that should do it. You might need some JS to keep the abs element and gif the same size as the text container, depending on what your page looks like.
Future browser implementations might outwit it, but then again, future implementations might not suffer from what you're trying to prevent.
posted by yerfatma at 2:25 PM on August 28, 2004
Future browser implementations might outwit it, but then again, future implementations might not suffer from what you're trying to prevent.
posted by yerfatma at 2:25 PM on August 28, 2004
You can't disable text highlighting double click action, but what you can do is after a single click takes places, replace that button with a depressed button state, sort of like how on MeFi when you hit Post the button gets disabled to prevent accidental double clicks.
posted by riffola at 2:33 PM on August 28, 2004
posted by riffola at 2:33 PM on August 28, 2004
You could put the text in an input field, remove the borders, and set it to disabled. Much hackery.
posted by influx at 3:14 PM on August 28, 2004
posted by influx at 3:14 PM on August 28, 2004
riffola (or Matt, if you're reading this)- what's the code to accomplish that? I have some stuff I'd love to implement that kind of safeguard on.
posted by mkultra at 3:26 PM on August 28, 2004
posted by mkultra at 3:26 PM on August 28, 2004
Umm...perhaps position a transparent image over the text, and then apply onDblClick to the image?
posted by kickingtheground at 3:37 PM on August 28, 2004
posted by kickingtheground at 3:37 PM on August 28, 2004
Response by poster: mkultra: The following, if rudimentary, will disable a submit button after it's been clicked. Depending on your familiarity with HTML forms and Javascript, you can build from here.
<input type="submit" name="testbutton" value="Submit" onclick="void(this.disabled=true)">
posted by Danelope at 3:45 PM on August 28, 2004
<input type="submit" name="testbutton" value="Submit" onclick="void(this.disabled=true)">
posted by Danelope at 3:45 PM on August 28, 2004
Are there truly so many Opera users in the world that I should be concerned about such an oft-misbehaved browser?
Well, I don't test anything in Opera. There are just far too many versions of it, and it's horribly buggy -- more so than IE, even. Opera users always really annoy me with their "your site doesn't work in my piece-of-shit browser, you've got to fix it!" attitude. Why do things I do work absolutely fine in IE, Mozilla/Firefox, Konqueror/Safari, and even fucking Lynx, but always break in Opera, eh, Opera users?
Opera is a broken browser that costs money (or makes you look at extra ads), not to mention being horrible bloatware. Its users are like some kind of crazy cult. Don't bother with 'em, seriously.
posted by reklaw at 4:40 PM on August 28, 2004
Well, I don't test anything in Opera. There are just far too many versions of it, and it's horribly buggy -- more so than IE, even. Opera users always really annoy me with their "your site doesn't work in my piece-of-shit browser, you've got to fix it!" attitude. Why do things I do work absolutely fine in IE, Mozilla/Firefox, Konqueror/Safari, and even fucking Lynx, but always break in Opera, eh, Opera users?
Opera is a broken browser that costs money (or makes you look at extra ads), not to mention being horrible bloatware. Its users are like some kind of crazy cult. Don't bother with 'em, seriously.
posted by reklaw at 4:40 PM on August 28, 2004
flash? (especially considering the fact that you are trying to replicate a the behavior of desktop app)
posted by ChasFile at 5:24 PM on August 28, 2004
posted by ChasFile at 5:24 PM on August 28, 2004
text as an image?
posted by SpaceCadet at 6:10 PM on August 28, 2004
posted by SpaceCadet at 6:10 PM on August 28, 2004
Opera is like 2MB. With each version more and more bells and whistles that were already there but not activated by default are appearing in the default interface settings, creating the illusion of bloat, but it's actually staying a very small and fast browser.
I used to use it because at the time it was faster and had better features than Mozilla, but with the advent of FireFox I'm basically just doing it out of laziness, and I plan to switch soon. Still, Opera still holds its own - for example, I keep my tab bar and address bar on the bottom and buttons and status bar up on top, something that is still not easy to do in Firefox I think.
posted by abcde at 10:51 AM on August 29, 2004
I used to use it because at the time it was faster and had better features than Mozilla, but with the advent of FireFox I'm basically just doing it out of laziness, and I plan to switch soon. Still, Opera still holds its own - for example, I keep my tab bar and address bar on the bottom and buttons and status bar up on top, something that is still not easy to do in Firefox I think.
posted by abcde at 10:51 AM on August 29, 2004
This thread is closed to new comments.
posted by Danelope at 12:45 PM on August 28, 2004