एचटीएमएल: क्या आप ब्राउज़र से टेक्स्ट तत्वों को छिपा सकते/अनदेखा कर सकते हैं (CTRL + F)

Question

मुझे एक काफी जटिल UI के साथ एक वेब ऐप मिला है, और सामग्री के लिए आरक्षित स्क्रीन का एक हिस्सा है।

यदि संभव हो, तो मैं इसे बनाना चाहता हूं ताकि जब उपयोगकर्ता ब्राउज़र की अंतर्निहित टेक्स्ट खोज (CTRL + F) का उपयोग करता है, UI में किसी भी पाठ को अनदेखा किया जाता है और केवल वास्तविक सामग्री की खोज की जाती है।

क्या यह करने योग्य है? CSS और JavaScript स्वीकार्य

कर रहे हैं (मुझे पता है मैं शायद एक <canvas> के लिए पाठ प्रस्तुत करना सकता है, लेकिन इसके लायक नहीं है वहाँ प्रयास)

Answer 1

आप सीएसएस content संपत्ति का उपयोग कर अपने यूआई पाठ को इंजेक्ट कर सकते हैं। इस तरह से जेनरेट किया गया टेक्स्ट खोज योग्य नहीं है क्योंकि यह सामग्री की बजाय दस्तावेज़ शैली का हिस्सा है।

उदाहरण के लिए:

आप इस तरह के <button id="dosomething"></button> के रूप में आप इसके अंदर कुछ न खोजने योग्य पाठ जोड़ सकते हैं निम्नलिखित सीएसएस का उपयोग कर अपने यूआई में एक बटन है, तो:

#dosomething:before { 
    content: "Click Me"; 
} 

एक बेला मेरे द्वारा बनाए गए यह प्रदर्शित करने के लिए कि यह कैसे काम करता है: http://jsfiddle.net/3xENz/ ध्यान दें कि यह <a> टैग के साथ भी काम करता है।

मुझे सलाह है कि आप :before चयनकर्ता के साथ चिपके रहें क्योंकि यह IE8 में काम करता है, जबकि :after चयनकर्ता नहीं करता है।

यदि आपके पास एक अधिक जटिल UI तत्व है, तो आप पाठ सामग्री को पकड़ने के लिए इसके अंदर एक और तत्व भी जोड़ सकते हैं।

#complexcontrol .text:before { 
    content: "Click Me"; 
} 

के बाद से स्क्रीन रीडर्स शायद ठीक से इन शैलियों को संसाधित नहीं करेंगे तो आप अभी भी एक ही पहुँच समस्या है, जैसा कि आप छवियों के साथ होता है, लेकिन यह:

<div id="complexcontrol"><div class="text"></div></div> 

निम्नलिखित सीएसएस के साथ

: उदाहरण के लिए बनाए रखने के लिए बहुत आसान होगा और एक और अधिक प्रतिक्रियाशील डिजाइन की अनुमति देता है।

Answer 2

मेरे सुझाव आप जिस क्षेत्र होने के लिए नहीं करना चाहते हैं बनाने के लिए किया जाएगा एक छवि खोजने योग्य है या इसे फ़्लैश की तरह कुछ उपयोग करें। एकमात्र समाधान जिसे मैं ढूंढने में सक्षम था this था। लेकिन इसका उपयोग पूरी तरह से आपके ऊपर है।

Answer 3

nullability के answer पर विस्तार करने के लिए:

.css-text [data-content]:before { 
 
    content: attr(data-content); 
 
}

<div class="css-text"> 
 
    Hello, <span data-content="World"></span>! 
 
</div>

सी एफ: तुम भी ऐसे ही एक डेटा विशेषता में पाठ स्टोर कर सकते हैं https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes#CSS_Access