Reemplaza el comportamiento original al seleccionar textos en el dispositivo móvil

Question

Me gustaría saber si hay una forma de anular el comportamiento nativo cuando selecciona textos en el navegador móvil. Estoy intentando admitir dispositivos iPhone y Android al proporcionar mi propia barra de acciones.

¿Algún consejo?

Answer 1

Aunque podría simplemente usar el evento selectionchange para mostrar su 'barra de acciones' junto con la funcionalidad nativa, si desea 'reemplazar' el comportamiento nativo, necesitará falsificar todas las selecciones desde cero o usar el selectionchange evento y el segundo que la selección se realiza, envuelve el texto seleccionado con un elemento span de color, por ejemplo, y cancela la selección real (mientras muestra su barra de acciones), el problema con este método sería que 1) la barra de acciones nativa podría mostrarse fracción de segundo y 2) la experiencia será diferente de lo que el usuario está acostumbrado a tener posiblemente efectos peligrosos. Si por el contrario desea realizar las selecciones desde cero, debe usar la propiedad user-select css para deshabilitar la selección de texto y la siguiente figura basada en la entrada táctil y el texto que debe seleccionar (con tramos de colores) (realísticamente solo posible) en un entorno extremadamente controlado (por ejemplo, una aplicación de lector de solo texto)).

Tenga en cuenta que esto no funcionará en Firefox y Opera como el evento selectionchange no se dispara allí y que tendría que usar un controlador touchend evento en el documento + parar el burbujeo de todos los otros eventos touchend para apoyar móvil Opera y Firefox móvil. (Crédito por el hecho de que select no funciona y selectionchange debe usarse va a Tim abajo)

Answer 2

Referencia:

jsFiddle Demo with Plugin

Lo anterior jsFiddle demo que hizo utiliza un plugin para permitirle a evitar cualquier bloque de texto que se seleccione en Android o iOS dispositivos (junto con los navegadores de escritorio también).

Esto no interfiere con de otras marcas que pueda tener, tales como jQuery oyentes .click(); de eventos, como se demuestra en el jsFiddle.

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

HTML de ejemplo: jQuery

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

<p> This text is selectable</p> 

muestra:

$(document).ready(function(){ 

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

}); 

completa 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

Si yo 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; 
}