Web móvil - Desactive la selección de texto de toque largo/taphold

Question

He visto/escuchado todo sobre la desactivación de la selección de texto con las variaciones de user-select, pero ninguna de ellas funciona para el problema que estoy teniendo. En Android (y supongo que en iPhone), si toca y mantiene presionado el texto, lo resalta y muestra pequeñas banderas para arrastrar y seleccionar texto. Necesito desactivar los (ver imagen):

He intentado -webkit-touch-callout en vano, e incluso intentado cosas como $('body').on('select',function(e){e.preventDefault();return;}); en vano. Y los trucos baratos como ::selection:rgba(0,0,0,0); tampoco funcionarán, ya que ocultarlos no ayudará, la selección aún ocurre e interrumpe la IU. Además, supongo que esas banderas todavía estarían allí.

Cualquier idea sería genial. ¡Gracias!

Answer 1

Referencia:

jsFiddle Demo with Plugin

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

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: código

$(document).ready(function(){ 

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

}); 

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'); 
     }); 
     return this; 
    } 
}); 

por su comentario mensaje:I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.

yo simplemente habría utilizar un envoltorio que es no afectados por este plugin, sin embargo, es de texto contenidos están protegidos uso de este plugin.

para permitir la interacción con un enlace en un bloque de texto, puede utilizar span tags para todos, pero el enlace y añadir el nombre de clase .notSelected sólo para aquellos span tags, preservando así la selección y la interacción del enlace anclas.

Actualización de estado: Esta actualización jsFiddle confirma que le preocupa que quizás otras funciones no funcionen cuando se desactiva la selección de texto. En este jsFiddle actualizado se muestra jQuery Click Event listener que activará una alerta del navegador cuando se haga clic en el texto en negrita, incluso si ese texto en negrita no es seleccionable por texto.

Answer 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); 

Esto lo deshabilitará para cada navegador que vaya.

Answer 3

-webkit-user-select: none; no fue compatible con Android hasta 4.1 (lo siento).