Overrides native text selection behavior on mobile device

Question

I would like to know if there is a way to override my own behavior when selecting texts in a mobile browser. I am trying to support both iPhone and Android devices by providing my own action bar.

Any tips?

Answer 1

Although you could just use the selectionchange event to show your “action bar” along with your own functionality, if you want to “replace” the native behavior, you need to either fake all selections from scratch or use selectionchange , and in the second, select the selected text , for example, with a colored span element and canceling the real choice (showing your action bar), the problem with this method will be that 1) your own action screen can be displayed for a split second and 2) the experience will be different from what the user l uses for the possible presence of hazardous effects. If, on the other hand, you want to make a selection from scratch, you should use the user-select css property to disable text selection and the next result based on the touch screen, and you want the text to “select” (at color intervals) (realistic only possible in an extremely controlled environment (for example, a text-only reader application)).

Please note that this will not work in Firefox and Opera, since the selectionchange event does not fire there, and you will need to use the touchend event touchend on the + document, stopping bubbling of all other touchhend events to support mobile and firefox mobile opera. (Credit for select not working and selectionchange should be used for Tim Down)

Answer 2

Reference:

jsFiddle Demo with Plugin

The jsFiddle Demo above uses a plugin that allows you to prevent the selection of any block of text on Android or iOS devices (along with desktop browsers, too).

This means that it does not interfere with other markup, such as jQuery .click(); event listeners as shown in jsFiddle.

It is easy to use, and here is the sample markup after installing the jQuery plugin.

HTML example:

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

JQuery example:

 $(document).ready(function(){ $('.notSelectable').disableSelection(); }); 

Full jQuery plugin:

 $.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'); }); } }); 

Answer 3

If your goal is to prevent selection, you can use some CSS, for example

 body { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; }