Mobile Web - Lang-berühren/Tapphold Textauswahl deaktivieren

Question

Ich habe gesehen/gehört alles über die Deaktivierung der Textauswahl mit den Variationen von user-select, aber keiner von denen für das Problem, das ich habe. Auf Android (und ich vermute auf dem iPhone), wenn Sie auf Text tippen und halten, wird er hervorgehoben und es werden kleine Markierungen zum Ziehen und Auswählen von Text angezeigt. Ich muss diejenigen deaktivieren (siehe Bild):

ich ohne Erfolg -webkit-touch-callout versucht haben, und sogar versucht, Dinge wie $('body').on('select',function(e){e.preventDefault();return;}); ohne Erfolg. Und die billigen Tricks wie ::selection:rgba(0,0,0,0); funktionieren auch nicht, da das Ausblenden nicht hilft - die Auswahl passiert immer noch und stört die Benutzeroberfläche. Außerdem vermute ich, dass diese Flaggen immer noch da wären.

Alle Gedanken wären großartig. Vielen Dank!

Answer 1

Referenz:

jsFiddle Demo with Plugin

Die oben jsFiddle Demo habe ich verwendet ein Plugin Sie zu ermöglichen, von beliebigen Textblock verhindern in Android ausgewählt werden oder iOS Geräte (zusammen mit Desktop-Browsern auch).

Es ist einfach zu bedienen und hier ist die Beispiel-Markup, sobald das jQuery-Plugin installiert ist.

Beispiel HTML:

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

<p> This text is selectable</p> 

Beispiel jQuery:

$(document).ready(function(){ 

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

}); 

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

Per Dein Kommentar:I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.

würde ich einfach würde einen Wrapper verwenden, die nicht betroffen von diesem Plugin ist, aber es ist Text-Inhalte mit diesem Plugin geschützt sind.

Damit die Interaktion mit einem Link in einem Textblock, Sie span tags für alle, aber die Verbindung nutzen können und die Klassennamen .notSelected für derjenigediejenigedasjenige span tags nur hinzufügen, so dass die Auswahl und Zusammenwirken des Link Anker zu erhalten.

Statusaktualisierung: Diese aktualisierte jsFiddle bestätigt Ihnen, dass möglicherweise andere Funktionen nicht funktionieren, wenn die Textauswahl deaktiviert ist. In dieser aktualisierten jsFiddle-Datei wird jQuery Click Event-Listener angezeigt, der eine Browserwarnung auslöst, wenn auf den fettgedruckten Text geklickt wird, selbst wenn dieser fett gedruckte Text nicht durch Text auswählbar ist.

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

Dies wird es für jeden laufenden Browser deaktivieren.

Answer 3

-webkit-user-select: keine; wurde bis Android 4.1 nicht unterstützt (sorry).