Desactivar la selección de texto al hacer doble clic

I'm working in a GWT app that will have two RichTextAreas. In each of them there will be the same sentence, but in different languages. When the user clicks in a word it will be highlighted together with its correspondence in the other RichTextArea. When a user double clicks in a word, instead of the words, their chunks will be highlighted. Because of the double click event is never raised (I don't know why) I created my own class, which extends RichTextArea and I raised myself the double click event (depending of the time passed between two clicks).

The problem is that I can't disable default text selection. I've been searching for possible solutions but I didn't found any that actually worked. I've tried with both CSS and JavaScript. This is how my class looks like:

public class MyRichTextArea extends RichTextArea
{
    private boolean clickedOnce = false;
    private int msDelay = 250;

    public MyRichTextArea()
    {
        sinkEvents(Event.ONMOUSEDOWN);
                disableTextSelectInternal(this.getElement());
    }

    public void onBrowserEvent(Event event)
        {
        switch (DOM.eventGetType(event))
        {
            case Event.ONMOUSEDOWN:
                if (!clickedOnce)
                {
                    clickedOnce = true;
                    Timer t = new Timer() 
                    {
                        public void run() 
                        {
                            if (clickedOnce)
                            {
                                clickedOnce = false;
                                raiseEvent(1);
                            }
                        }
                    };
                    t.schedule(msDelay);
                }
                else
                {
                    clickedOnce = false;
                    raiseEvent(2);
                }
                //DOM.eventPreventDefault(event);
                break; 

        }
    }

    public void raiseEvent(int clickCount)
    {
        if (clickCount == 1)
        {
            this.fireEvent( new GwtEvent<ClickHandler>() 
                {
                    public com.google.gwt.event.shared.GwtEvent.Type<ClickHandler> getAssociatedType() 
                    {
                        return ClickEvent.getType();
                    }

                    protected void dispatch(ClickHandler handler) 
                    {
                        handler.onClick(null);
                    }
                });
        }
        else
        {
            this.fireEvent( new GwtEvent<DoubleClickHandler>() 
                    {
                        public com.google.gwt.event.shared.GwtEvent.Type<DoubleClickHandler> getAssociatedType() 
                        {
                            return DoubleClickEvent.getType();
                        }

                        protected void dispatch(DoubleClickHandler handler) 
                        {
                            handler.onDoubleClick(null);
                        }
                    });
        }
    }

    protected native static void disableTextSelectInternal(Element e)
    /*-{
            e.ondrag = function () { return false; };
            e.onselectstart = function () { return false; };
            e.onmousedown = function () { return false; }
            e.style.MozUserSelect="none"
    }-*/;
}

I picked that method from here: http://comments.gmane.org/gmane.org.google.gwt/49564, but it doesn't work to me. I guess this will have to be done with JavaScript. I'm a bit newbie in JavaScript and I don't know where to start from. If anyone has faced this problem before or has any possible solution, any help will be appreciated.

Gracias por adelantado

preguntado el 10 de marzo de 12 a las 14:03

1 Respuestas

I believe you're looking for CSS tags. They are as follows:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

In order to implement them into your object through java, you're looking for something like this:

MyRichTextArea myRichTextArea = new MyRichTextArea();
myRichTextArea.getElement().setAttribute("style",
    myRichTextArea.getElement().getAttribute("style") +
" -webkit-touch-callout: none;" +
" -webkit-user-select: none;" +
" -khtml-user-select: none;" +
" -moz-user-select: none;" +
" -ms-user-select: none;" +
" user-select: none;");

This appends the CSS above with the already set CSS of the element. Hope this is the answer you're looking for!

Respondido 12 Feb 13, 17:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.