Search jQuery

jQuery Forum

Make UI elements non-text-selectable

in jQuery Mobile • 11 years ago

If you don't like the fact that clicking & accidentally dragging a bit on JQM UI elements is causing strange text etc selections such as these to appear,

just disable selectability of your UI:

body {

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

-webkit-user-select: none;

}

Ref: http://help.dottoro.com/lcrlukea.php

of course if you want certain portions of your UI to be selectable you can re-enable as needed. (Note that inputs are always select enabled anyway so I have found this top-level default to be quite handy)

Replies(7)

loumazz

Re: Make UI elements non-text-selectable

11 years ago

Tried that in my .css file for Safari.

No difference.

What am I missing?

toad99

Re: Make UI elements non-text-selectable

11 years ago

By "no difference" I assume you mean you still get selectable text/page elements ?

The style - for whatever reason - did probably not make it into your DOM.

Turn on the Web Inspector on desktop Safari under the Developer menu, click on the leftmost button in the inspector ("Elements") and find your body element. On the right hand side it should say what styles are applied to the body element.

In particular if you open up the topmost style panel, you should see a

-webkit-user-select: none;

if that is not present, debug until it is :)

Then you should get the desired result.

loumazz

Re: Re: Make UI elements non-text-selectable

11 years ago

Yes, using the inspector it's not clear that -webkit-user-select if off. I can't seem to find a reference to it anywhere.

I am ingesting my css at the top of the index file, and other styles seem to be working.

This may be a snipe hunt - the reason I'm checking is because I have clickable fields in my app that

work in Mac Safari, but are unresponsive in iOS Safari. I've included some details in another post.

This is a pretty critical item for me, so any pointers appreciated.

toad99

Re: Make UI elements non-text-selectable

11 years ago

My guess is that you are not including the stylesheet

perhaps there is a syntax error in your css rule - you are writing

body { ....

and not

.body { ....

right ?

I include a picture of the "style hunting" procedure in the webkit debugger. If all is well, the style should appear twice, once on top in the computed style and once further below, where your stylesheet's body tag rule appears)