web-dev-qa-db-fra.com

Web mobile - Désactiver la sélection de texte tactile longue durée

J'ai vu/entendu tout sur la désactivation de la sélection de texte avec les variations de user-select, Mais aucune de celles-ci ne fonctionne pour le problème que j'ai. Sur Android (et je suppose sur iPhone), si vous appuyez et maintenez sur du texte, il le met en surbrillance et fait apparaître de petits drapeaux pour faire glisser et sélectionner du texte. Je dois les désactiver (voir image):

screenshot

J'ai essayé -webkit-touch-callout En vain, et j'ai même essayé des choses comme $('body').on('select',function(e){e.preventDefault();return;}); en vain. Et les astuces bon marché comme ::selection:rgba(0,0,0,0); ne fonctionneront pas non plus, car les masquer n'aidera pas - la sélection se produit toujours et perturbe l'interface utilisateur. De plus, je suppose que ces drapeaux seraient toujours là.

Toutes les pensées seraient géniales. Merci!

androidiphonecssmobilehighlight
24
Brad Orego

Référence:

Démo jsFiddle avec plugin

La démo jsFiddle ci-dessus que j'ai faite utilise un plugin pour vous permettre d'empêcher la sélection de tout bloc de texte dans Appareils Android ou iOS (ainsi que les navigateurs de bureau).

Il est facile à utiliser et voici l'exemple de balisage une fois le plugin jQuery installé.

Exemple de HTML: 

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

<p> This text is selectable</p>

Exemple de jQuery: 

$(document).ready(function(){

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

});

Code du 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;
    }
});

Selon le commentaire de votre message: I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.

Je voudrais simplement utiliser un wrapper qui n'est pas affecté par ce plugin , mais son contenu texte est protégé à l'aide de ce plugin.

Pour permettre l'interaction avec un lien dans un bloc de texte, vous pouvez utiliser span tags Pour tout sauf le lien et ajouter le nom de classe .notSelected Pour ceux span tags Uniquement, préservant ainsi la sélection et interaction du lien d'ancrage.

Mise à jour du statut: Cette mise à jour jsFiddle confirme vous craignez que d'autres fonctions ne fonctionnent peut-être pas lorsque la sélection de texte est désactivée. Dans ce jsFiddle mis à jour se trouve l'écouteur d'événement jQuery Click qui déclenchera une alerte de navigateur lorsque le texte en gras est cliqué, même si ce texte en gras n'est pas sélectionnable.

15
arttronics
-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);

Cela le désactivera pour chaque navigateur utilisé.

39
CoreyRS

-webkit-user-select: aucun; n'était pas pris en charge sur Android jusqu'au 4.1 (désolé).

2
John Reck