Solved

disable text selection

Posted on 2011-02-24
8
751 Views
Last Modified: 2012-05-11
I would like to disable text selection on an entire page except for one text box. I am able to disable text selection for the page, but have not had success in re-enabling it for the text box. I tried something like this:

var element = document.getElementById('txtKeyword');
 document.onselectstart = function () { return false; }
 element.onselectstart = function () { return true; }

...but that didn't work.

How can I enable text selection for only one element?

Thanks!
Amy

0
Comment
Question by:AmyL
  • 3
  • 3
  • 2
8 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34969861
0
 

Author Comment

by:AmyL
ID: 34970232
That shows how to disable for an element (which I can do currently). I can also disable text selection for the document.

What I would like to do is disable text selection for the entire document, then re-enable for one text box. The re-enabling is the part that is not working.

If there is another way to achieve this, I would be open to it. My main objective is to prevent my drag and drop from grabbing text along the way.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34970245
i dont think that it is possible.

Since if you disable it for the document, it will propagate down to all the child elements.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 3

Expert Comment

by:LFLFM
ID: 34970324
There's always the "transparent <div> over the text" trick.
If not, try these:
http://stackoverflow.com/questions/69430/is-there-a-way-to-make-text-unselectable-on-an-html-page

But remember, you can only fool the foolish; their computer HAS to HAVE the information to show it to the user, so its IMPOSSIBLE to prevent them from having the information in almost any format they want.
0
 

Author Comment

by:AmyL
ID: 34971319
I am not trying to fool anyone, I am trying to keep the drag and drop from looking messy.
0
 
LVL 3

Expert Comment

by:LFLFM
ID: 34972746
sorry, didn't mean to imply you were actually trying to fool anyone, my point was just that, if you were trying to protect your content from copy, that it was impossible.

:-)
0
 

Author Comment

by:AmyL
ID: 34975590
No problem :-) ...I was just clarifying that I actually don't care if they select the text on the page, I am just trying to fix it so that text won't be inadvertantly selected while doing the drag-and-drop.

I came up with a solution. I have an onload function:

var original_onselectstart;
window.onload = function()
{
_original_onselectstart = document.onselectstart;
 document.onselectstart = function () { return false; }
}

a toggling function:

function enableSelectStart(enable)
{
  if(enable)
  {
    document.onselectstart = original_selectstart;
  }
  else
{
    document.onselectstart = function() { return false; }
 }
}

and an event on my text box:

onFocus="enableSelectStart(true);" onBlur="enableSelectStart(false);"

This solution is working perfectly for me in IE...I'm not sure yet what to do with FireFox.
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 34977467
try this

window.onload = function()
{
_original_onselectstart = document.onselectstart;
 document.onselectstart = function () { return false; }
document.onmousedown = function () { return false; } // mozilla
}

check this
http://www.codingforums.com/archive/index.php/t-125810.html
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question