Web móvil: deshabilita la selección de texto de toque largo / taps

He visto / escuchado todo acerca de desactivar la selección de texto con las variaciones de user-select , pero ninguno de ellos está funcionando para el problema que estoy teniendo. En Android (y supongo que en iPhone), si pulsa y mantiene el texto, lo resalta y muestra pequeños indicadores para arrastrar y seleccionar texto. Necesito deshabilitarlos (ver imagen):

captura de pantalla

He intentado -webkit-touch-callout sin éxito, e incluso probado 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á, ya que ocultar estos no ayudará – la selección sigue ocurriendo y interrumpe la interfaz de usuario. Además supongo que esas banderas estarían allí.

Cualquier pensamiento sería genial. ¡Gracias!

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).

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(); }); 

Código del complemento:

 $.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 del mensaje: I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.

Simplemente utilizaría un envoltorio que no se vea afectado por este plugin, sin embargo, su contenido de texto está protegido usando este complemento.

Para permitir la interacción con un enlace en un bloque de texto, puede utilizar span tags para todos excepto el vínculo y agregar nombre de clase .notSelected para esas span tags solamente, preservando así la selección y la interacción del enlace de anclajes.

Actualización de estado: Este jsFiddle actualizado confirma que le preocupa que tal vez otras funciones no funcionen cuando se deshabilita la selección de texto. Se muestra en este jsFiddle actualizado es jQuery Haga clic en Evento de escucha que disparará una Alerta de navegador para cuando se hace clic en el texto en negrita, incluso si el texto en negrita no es seleccionable por texto.

 -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 inhabilitará para cada navegador que vaya.

-webkit-user-select: ninguno; No fue compatible en Android hasta 4.1 (lo siento).

  • Cometa Scala y aplicaciones móviles
  • ADB no reconoce Nexus 4 - más consejos
  • Corona sdk tamaño de la aplicación es demasiado grande
  • Obtener MSISDN desde la tarjeta SIM con Android
  • ¿El navegador de Android indica un tamaño de pantalla incorrecto?
  • ¿Por qué es posible el uso de scripts entre dominios para archivos locales en un dispositivo móvil?
  • ¿Es OAuth en un teléfono móvil usando un servidor proxy demasiado problema?
  • Twitter Bootstrap modal en dispositivos móviles
  • ¿Soporta el emulador de Android OpenGL ES 2.0?
  • NavigationGroup android en Titanium
  • Desarrollo multiplataforma HTML5 móvil con una sola base de código, incluyendo servidor de aplicaciones y bibliotecas de clientes nativos?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.