DisableSelection for everything except input [type = text]

Question

I have a requirement to disable selection on a web page for everything except input elements [type = text].

This accepted answer on a similar question is almost a trick, but it does not disable the selection for containers containing input elements [type = text]. Therefore, the user can still select by starting a drag and drop operation from one of these containers.

Is this possible, i.e. you can turn off the selection for a container element by turning it on for child elements (in particular, child input = text elements).

@Pointy: "Why not just pull this first call .not ()?"

The output of the first .not call will give:

 $('body').not('input').disableSelection(); 

which, as stated in a related question, will still disable everything on the page, including input elements [type = text].

@ David Thomas: "Do you have a live demo ..."

I don’t have a live demo, but this is pretty trivial. For example, a div with a padding bit that contains an input element [type = text]. Result:

• With $('body').not('input').disableSelection(); selectiopn is disabled for the entire page, including input elements.

• With $('body *').not(':has(input)').not('input').disableSelection(); the selection is disabled for all elements that do not contain an input element. But you can select the entire page by running a drag and drop operation from the container containing the input element.

Answer 1

I found a solution that seems to do what I want and will be interested in comments / improvements from jquery / javascript experts.

 $(document).ready(function () { $("body").disableSelection(); $("body").delegate('input[type=text],textarea', "focus", function () { $("body").enableSelection(); }); $("body").delegate("input[type=text],textarea", "blur", function () { $("body").disableSelection(); }); }); 

When a text field (input [type = text] or textarea) has focus, then drag and drop selects only the text in the text field. Therefore, it is “safe” to enable selection for the entire page, while the text field has focus (between focus and blur events).

There is a noticeable delay when switching between text fields on IE8 / 9. It is not noticeable in Google Chrome, which, as I understand it, has a faster JavaScript mechanism. Therefore, I can live with a performance hit, especially since IE10 will have a faster JavaScript engine.

UPDATE

When using the ASP.NET UpdatePanel this must be changed to disable the selection after each partial postback:

 Sys.Application.add_load(function () { $("body").disableSelection(); }); 

Answer 2

Ok, pull up the braces and get ready for a really dirty hack .

Denial of responsibility:

I do not think this is a good way to do something. I just wanted to solve the problem of getting the desired OP functionality. If someone else can make it work in a cleaner way, submit it.

---

After playing with the disableSelection() function, it seemed that if the parent was disabled, all of its children would also not be selectable (please correct me if I am wrong). So, I decided that if you want everything impossible to select, except for small parts, you could put all your markup in one non-selectable <div> and use absolute positioning to place selective clones of your <input> (or any tag , really) on top of non-selectable ones. These clones will be in the second <div> , which has not been disabled.

Here is an example of this idea: http://jsfiddle.net/pnCxE/2/ .

Disadvantages:

• Styling is becoming a big headache. Any element that relies on the parental style (i.e. Position, size, colors, etc.) cannot be cloned, because the clones are in a separate place.
• Forms become much more difficult to manage because (again) the clone is not in the same place as the cloned element.
• You need to deal with collision naming, as the clone will have the same identifier as the cloned element. (This is doable, I just didn’t want to code it, as this will probably require special attention who uses this idea).

So, although you can get around the available restrictions, you might be better off just accepting the container choice. I think long and hard before putting this code into a production environment.

Answer 3

Try this, although this is the same thing you are already using:

 $('* :not(input)').disableSelection(); 

I don’t understand why you need to use the whole body element and not narrow it down to text nodes (p, h [..], ul, ol, etc.)

And I agree with @David Thomas - it would be easier to see the test page you're working on.