मोबाइल वेब - लंबी स्पर्श/टैपहोल्ड टेक्स्ट चयन अक्षम करें

Question

मैंने user-select की विविधताओं के साथ टेक्स्ट चयन को अक्षम करने के बारे में सब कुछ देखा/सुना है, लेकिन उनमें से कोई भी मेरी समस्या के लिए काम नहीं कर रहा है। एंड्रॉइड पर (और मैं आईफोन पर अनुमान लगाता हूं), यदि आप टेक्स्ट पर टैप-एंड-होल्ड करते हैं, तो यह इसे हाइलाइट करता है और टेक्स्ट खींचने और चुनने के लिए छोटे झंडे लाता है।

मैं कोई लाभ नहीं हुआ -webkit-touch-callout की कोशिश की है, और यहां तक ​​कोई लाभ नहीं हुआ $('body').on('select',function(e){e.preventDefault();return;}); तरह बातें करने की कोशिश की: मैं उन (छवि देखें) को निष्क्रिय करने की जरूरत है। और सस्ता चाल ::selection:rgba(0,0,0,0); या तो काम नहीं करेगी, क्योंकि इन्हें छिपाने में मदद नहीं होगी - चयन अभी भी होता है और यह यूआई को बाधित करता है। इसके अलावा मैं अनुमान लगा रहा हूं कि उन झंडे अभी भी वहां होंगे।

कोई भी विचार बहुत अच्छा होगा। धन्यवाद!

Answer 1

संदर्भ:

jsFiddle Demo with Plugin

jsFiddle डेमो ऊपर मैंने एक प्लगइन का उपयोग करता है चयनित होने एंड्रॉयड में या आईओएस से पाठ के किसी भी ब्लॉक को रोकने की अनुमति देना डिवाइस (डेस्कटॉप ब्राउज़र के साथ भी)।

इसका उपयोग करना आसान है और jQuery प्लगइन स्थापित होने के बाद यहां नमूना मार्कअप है।

नमूना HTML:

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

<p> This text is selectable</p> 

नमूना jQuery:

$(document).ready(function(){ 

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

}); 

प्लगइन कोड:

$.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; 
    } 
}); 

प्रति अपना संदेश टिप्पणी:I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.

मैं बस एक आवरण कि है नहीं इस प्लगइन से प्रभावित प्रयोग करेंगे होगा, फिर भी यह पाठ सामग्री इस प्लगइन का उपयोग कर संरक्षित कर रहे हैं।

पाठ का कोई खंड में एक लिंक के साथ बातचीत, आप लेकिन लिंक सभी के लिए span tags का उपयोग करें और केवल उन्हीं span tags के लिए वर्ग के नाम .notSelected जोड़ने के लिए, इस प्रकार के चयन और एंकर लिंक की बातचीत संरक्षण सेट कर सकते हैं।

स्थिति अपडेट: इस अद्यतन jsFiddle की पुष्टि करता है कि आप चिंता का विषय है जब पाठ चयन अक्षम किया गया है कि शायद अन्य कार्यों काम न करें। इस अद्यतन जेएसफ़ाइल में दिखाया गया है jQuery क्लिक इवेंट श्रोता जो बोल्ड टेक्स्ट पर क्लिक होने पर ब्राउज़र अलर्ट को आग लगाएगा, भले ही वह बोल्ड टेक्स्ट टेक्स्ट-चयन योग्य न हो।

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

यह हर ब्राउज़र के लिए इसे अक्षम कर देगा।

Answer 3

-webkit-user-select: none; 4.1 (क्षमा करें) तक एंड्रॉइड पर समर्थित नहीं था।