jquery.textSelect icon indicating copy to clipboard operation
jquery.textSelect copied to clipboard

Add W3C Touch support for mobile browsers

Open JamesMGreene opened this issue 13 years ago • 8 comments

This library does not currently support the "touch" events necessary for it to work on mobile browsers.

Adding support for mobile browsers also introduces extra complexity as the whole text selection interface works much differently than that of a desktop browser: i.e. long tap to select a word, then drag the cursor ends to expand it to your desired selection range. It may not be possible to achieve the desired parity for mobile browsers as they probably don't fire additional events for that selection expansion activity (boo!).

Start with this touch detection technique leveraged from jQuery Mobile:

var touchSupported = $.support.touch || "ontouchend" in document;

JamesMGreene avatar Mar 31 '12 18:03 JamesMGreene

With regard to the original touch events, supposedly call e.preventDefault(); in the handler for touchend will prevent the mouse events from firing: http://stackoverflow.com/questions/8503453/click-event-called-twice-on-touchend-in-ipad

However, I don't believe this is a good solution either. Rather, I would prefer to keep track of it in a "registrar" for that target element's textSelect handler.

JamesMGreene avatar Feb 08 '13 22:02 JamesMGreene

Various iOS selection techniques to test:

  • http://teachmeios.com/tag/select/
  • http://m.cnet.com/news/ios-quick-tip-paragraph-text-selection/20033608?ds=1

JamesMGreene avatar Feb 09 '13 01:02 JamesMGreene

Some implementation techniques for consideration to keep things fast (a.k.a. "GhostClick"): https://developers.google.com/mobile/articles/fast_buttons#code

For example, notice how they only add listeners for touchmove and touchend in the handler for touchstart rather than having those listeners active all the time.

JamesMGreene avatar Feb 12 '13 16:02 JamesMGreene

See also Issue #10 for improved mobile support for selection via polling.

JamesMGreene avatar Feb 13 '13 12:02 JamesMGreene

More examples from Firefox: https://developer.mozilla.org/en-US/docs/DOM/Touch_events

JamesMGreene avatar Feb 13 '13 17:02 JamesMGreene

jQuery Mobile also uses an experimental set of events for vmouse to try to abstract the mouse vs. touch confusion away: https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.vmouse.js

JamesMGreene avatar Feb 18 '13 07:02 JamesMGreene

More:

  • http://stackoverflow.com/questions/14406161/listening-to-mousedown-and-touchstart-on-devices-that-use-touch-and-a-mouse-e-g
  • http://quirksmode.org/m/tests/touch.html

JamesMGreene avatar Feb 22 '13 12:02 JamesMGreene

Promising (based on GhostClick):

  • http://stackoverflow.com/a/7019461/471696
  • but see comments for potentially necessary tweaks:
    • http://stackoverflow.com/questions/7018919/how-to-bind-touchstart-and-click-events-but-not-respond-to-both#comment9123749_7019461
      • http://stackoverflow.com/questions/7018919/how-to-bind-touchstart-and-click-events-but-not-respond-to-both#comment9471000_7019461

JamesMGreene avatar May 23 '13 18:05 JamesMGreene