How to disable default text selection behavior?

1,599 views
Skip to first unread message

yilativs

unread,
Jan 30, 2008, 4:26:57 PM1/30/08
to Google Web Toolkit
Hello,

How to disable default text selection behavior when pressing left
mouse button and moving the mouse at
same time AND let all my widgets handle the mouse events?


I managed to do it in Firefox with:
DOM.setCapture(myWidget.getElement());
while doing same in IE6/7 all my widgets stop repsonding on mouse
operations.


Can I use DOM.setCapture for several widgets at once?

Regards,
Vitaliy S

Fred Sauer

unread,
Jan 30, 2008, 4:53:26 PM1/30/08
to Google-We...@googlegroups.com
Take a look at DOM.eventPreventDefault, which will prevent the text selection.

Some browsers also support CSS options like 'user-select: none'.

Only one element can be capturing at any time.

HTH
Fred

Darrell

unread,
Jan 31, 2008, 5:49:03 PM1/31/08
to Google Web Toolkit
I use the following code to disable text selection on an element:

/**
* Enables or disables text selection for the element. A circular
reference
* will be created when disabling text selection. Disabling should
be cleared
* when the element is detached. See the <code>Component</code>
source for
* an example.
*
* @param elem the element
* @param disable <code>true</code> to disable
*/
public static void disableTextSelection(Element elem, boolean
disable) {
setStyleName(elem, "my-no-selection", disable);
disableTextSelectInternal(elem, disable);
}

private native static void disableTextSelectInternal(Element e,
boolean disable)/*-{
if (disable) {
e.ondrag = function () { return false; };
e.onselectstart = function () { return false; };
} else {
e.ondrag = null;
e.onselectstart = null;
}
}-*/;

It will create a circular reference if you do not clear the anonymous
function. In MyGWT the function is enabled and cleared when a widget
is attached and detached to prevent the memory leak.

Darrell
MyGWT Library
http://mygwt.net

On Jan 30, 4:53 pm, "Fred Sauer" <f...@allen-sauer.com> wrote:
> Take a look at DOM.eventPreventDefault, which will prevent the text
> selection.
>
> Some browsers also support CSS options like 'user-select: none'.
>
> Only one element can be capturing at any time.
>
> HTH
> Fred
>
> On Jan 30, 2008 2:26 PM, yilativs <yilat...@gmail.com> wrote:
>
>
>
>
>
> > Hello,
>
> > How to disable default text selection behavior when pressing left
> > mouse button and moving the mouse at
> > same time AND let all my widgets handle the mouse events?
>
> > I managed to do it in Firefox with:
> > DOM.setCapture(myWidget.getElement());
> > while doing same in IE6/7 all my widgets stop repsonding on mouse
> > operations.
>
> > Can I use DOM.setCapture for several widgets at once?
>
> > Regards,
> > Vitaliy S
>
> --
> Fred Sauer
> f...@allen-sauer.com

melody

unread,
Feb 20, 2008, 10:10:50 AM2/20/08
to Google Web Toolkit
Darrel

Can you please show an example usage, particularly what the CSS (style
setStyleName(elem, "my-no-selection", disable)) my_no_selection
entails and how it contributes to the whole no selection thing.

Why do you need both GWT style setStyleName and then the native JSNI
code to for it to work?

Does it work in all browsers.

I use a similar function as shown in this thread
http://groups.google.com/group/Google-Web-Toolkit/browse_frm/thread/baecd1619301b09e/cf74f1495dbb47ce?lnk=gst&q=melody#cf74f1495dbb47ce

which works just fine in IE but does not quite work in FireFox (have
not tried Opera and Safari).

Thanks,

Melody

Kara Marie Rawson

unread,
Sep 16, 2012, 4:32:47 PM9/16/12
to google-we...@googlegroups.com, Google Web Toolkit, mped...@stuart.iit.edu
works great, thanx!

kara

Kara Marie Rawson

unread,
Sep 16, 2012, 4:34:41 PM9/16/12
to google-we...@googlegroups.com, Google Web Toolkit, mped...@stuart.iit.edu
an example would be this

@Override
    protected void onAttach() {
        super.onAttach();
        setStyleName(getElement(), "my-no-selection", true);
        CUtil.disableTextSelectInternal(getElement(), true);
    }
    
    @Override
    protected void onDetach() {
        super.onDetach();
        setStyleName(getElement(), "my-no-selection", false);
        CUtil.disableTextSelectInternal(getElement(), false);
    }

Then add 

final public static native void disableTextSelectInternal(Element e, boolean disable)/*-{
if (disable) {
e.ondrag = function() {
return false;
};
e.onselectstart = function() {
return false;
};
} else {
e.ondrag = null;
e.onselectstart = null;
}
    }-*/;

to your util class of your project

any ui widget or panel should allow you to override the attach and detach methods, which is where you should stick these methods. you can also call them dynamically if you wish to enable it at a later point.

On Wednesday, February 20, 2008 10:10:50 AM UTC-5, melody wrote:
Reply all
Reply to author
Forward
0 new messages