Mobile Web - Disable long-touch/taphold text selection

Question

I've seen/heard all about disabling text selection with the variations of user-select, but none of those are working for the problem I'm having. On Android (and I presume on iPhone), if you tap-and-hold on text, it highlights it and brings up little flags to drag and select text. I need to disable those (see image):

I've tried -webkit-touch-callout to no avail, and even tried things like $('body').on('select',function(e){e.preventDefault();return;}); to no avail. And the cheap tricks like ::selection:rgba(0,0,0,0); won't work either, as hiding these won't help - selection still happens and it disrupts the UI. Plus I'm guessing those flags would still be there.

Any thoughts would be great. Thanks!

Solution 1

Reference:

jsFiddle Demo with Plugin

The above jsFiddle Demo I made uses a Plugin to allow you to prevent any block of text from being selected in Android or iOS devices (along with desktop browsers too).

It's easy to use and here is the sample markup once the jQuery plugin is installed.

Sample HTML:

<p class="notSelectable">This text is not selectable</p>

<p> This text is selectable</p>

Sample jQuery:

$(document).ready(function(){

   $('.notSelectable').disableSelection();

});

Plugin code:

$.fn.extend({
    disableSelection: function() {
        this.each(function() {
            this.onselectstart = function() {
                return false;
            };
            this.unselectable = "on";
            $(this).css('-moz-user-select', 'none');
            $(this).css('-webkit-user-select', 'none');
        });
        return this;
    }
});

Per your message comment: I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.

I would simply would use a wrapper that is not affected by this plugin, yet it's text-contents are protected using this plugin.

To allow interaction with a link in a block of text, you can use span tags for all but the link and add class name .notSelected for those span tags only, thus preserving selection and interaction of the anchors link.

Status Update: This updated jsFiddle confirms you concern that perhaps other functions may not work when text-selection is disabled. Shown in this updated jsFiddle is jQuery Click Event listener that will fire a Browser Alert for when the Bold Text is clicked on, even if that Bold Text is not text-selectable.

Solution 2

-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);

This will disable it for every browser going.

Solution 3

-webkit-user-select:none; wasn't supported on Android until 4.1 (sorry).