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):
- Cómo ocultar la barra de estado de Android en el juego nativo escrito con gomobile
- Cualquier interpretación simple sobre 3G
- Fundamentos de la brecha telefónica
- ¿Cómo implementar multitouch en Unity3d en un dispositivo móvil?
- ¿Qué sucede con la ejecución de JavaScript (settimeout, etc.) cuando el iPhone / Android se va a dormir?
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!
- SetSpinnersShown y setCalendarViewShown en DatePicker obsoleto en el nivel 24 de API
- Deshabilitar el desplazamiento en todos los dispositivos móviles
- Cómo bloquear una llamada de número móvil y recepción de mensajes en el desarrollo de aplicaciones Android?
- ¿Cuáles son las diferencias entre touchmove y gesturechange?
- Cómo imprimir en la consola en Android Studio?
- Cómo poner la autenticación de usuario en una aplicación móvil
- Android ListView: obtenga una distancia de desplazamiento
- Error de Mobile SDK: OPERATION_NOT_ALLOWED
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).
- Android Compass que puede compensar la inclinación y el tono
- Cómo publicar en la pared de Facebook con Facebook android SDK, sin abrir el cuadro de diálogo