मैं मोबाइल फोन में केवल पढ़ने योग्य विशेषता कैसे काम कर सकता हूं?

Question

मेरे पास एक इनपुट <input class="form-control" readonly> है।

डेस्कटॉप ब्राउज़र पर, मुझे अपेक्षित व्यवहार मिलता है: इनपुट को क्लिक/केंद्रित नहीं किया जा सकता है।

लेकिन मोबाइल फोन में (वर्तमान में केवल iOS पर परीक्षण किया/सफारी) मैं व्यवहार जब मैं इनपुट क्षेत्र का दोहन निम्नलिखित:

आप देख सकते हैं कई चीजें हो रही हैं। एक इनपुट कर्सर इनपुट फ़ील्ड में दिखाया गया है, एप्लिकेशन ज़ूम किया गया है, नीचे बार दिखाया गया है। मैं इनपुट तत्व को मोबाइल फोन में इस तरह फोकस करने से कैसे रोक सकता हूं?

संपादित करें: सुझाया गया डुप्लिकेट मेरी समस्या का समाधान नहीं करता है।

Answer 1

तुम सिर्फ कुछ HTML तत्व के साथ किसी भी बातचीत से बचना चाहते हैं, निम्न प्रयास करें:

/* CSS */ 
.__readonly { 
    pointer-events: none; 
} 

और HTML में:

<!-- HTML --> 
<input class="form-control __readonly" readonly /> 

की [iOS8 सफारी में, केवल पढ़ने के लिए आदानों नियंत्रित किया जाता है