Solved

disable text selection

Posted on 2011-02-24
8
748 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
 
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

707 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now