Anula el comportamiento nativo al seleccionar textos en dispositivos móviles

Aunque podrías simplemente usar el evento selectionchange para mostrar tu 'barra de acción' junto a la funcionalidad nativa, si deseas 'reemplazar' el comportamiento nativo que necesitas para falsificar todas las selecciones desde cero o usar el evento selectionchange y el segundo La selección se hace envolviendo el texto seleccionado con un elemento de espacio de color por ejemplo y cancelar la selección real (mientras que muestra su barra de acción), el problema con este método sería que 1) la barra de acción nativa podría mostrar por una fracción de segundo y 2 ) La experiencia será diferente de lo que el usuario está acostumbrado a tener posiblemente efectos peligrosos. Si por otro lado usted quiere hacer las selecciones desde cero debe usar la propiedad user-select css para desactivar la selección de texto y la próxima figura fuera basado en el touchstart y thouchend que texto para "seleccionar" (con colores abarcan) (realista Sólo es posible en un entorno extremadamente controlado (por ejemplo, una aplicación de sólo lectura de texto)).

Tenga en cuenta que esto no funcionará en Firefox y Opera, ya que el evento selectionchange no se disparará allí y necesitaría utilizar un controlador de eventos touchend en el documento + detención de burbujas de todos los demás eventos touchend para apoyar opera mobile y firefox mobile. (El crédito por el hecho de que select no funciona y el cambio de selectionchange debe ser usado va a Tim Down)

Referencia:

JsFiddle Demo con Plugin

La demostración de jsFiddle que he hecho anteriormente utiliza un complemento para evitar que cualquier bloque de texto se seleccione en dispositivos Android o iOS (junto con los navegadores de escritorio).

Esto no interfiere con otro marcado que pueda tener, como jQuery .click(); Evento como se demuestra en el jsFiddle.

Es fácil de usar y aquí está el marcado de muestra una vez que el plugin jQuery está instalado.

Ejemplo de HTML:

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

JQuery de ejemplo:

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

Plugin completo de jQuery:

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

Si su objetivo es evitar la selección, puede utilizar algunos CSS como

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