उपयोगकर्ता क्लिक पर ऑटो-हाइलाइट टेक्स्ट कैसे करें

वेबसाइटों पर सामग्री के कुछ टुकड़ों को उपयोगकर्ताओं द्वारा कॉपी किया जाना चाहिए, जैसे कि URL पता, स्वचालित रूप से उत्पन्न एपीआई कुंजी, या कोड की कुछ पंक्तियाँ (स्निपेट्स)। लेकिन इन सामग्रियों की नकल करना एक चुनौती हो सकती है, खासकर उन उपयोगकर्ताओं के लिए जो ट्रैकपैड या गंदे माउस का उपयोग कर रहे हैं। तो चलिए उनके लिए इसे आसान बनाते हैं.

यदि आपने TheNextWeb जैसी वेबसाइटों पर ठोकर खाई है, तो आप पाएंगे कि जब आप इस पर क्लिक करते हैं तो शॉर्लिंक URL हाइलाइट हो जाता है। आइए देखें कि यह कैसे किया जाता है.

शुरू करना

शुरुआत करने के लिए, हम शार्टलिंक URL को लपेटने वाले HTML को बाहर रखते हैं.

 
 छोटी कड़ी 
  http://goo.gl/9JEpOz 
 
 

हमारे पास एक में लिपटा हुआ URL है अवधि Ionicon से एक आइकन के साथ तत्व। इन तत्वों की शैली पूरी तरह से आपके ऊपर है, क्योंकि यह आपकी वेबसाइट के लेआउट पर निर्भर करेगा। लेकिन, इस डेमो के उद्देश्य के लिए, मैं इसे इस तरह से स्टाइल करता हूं:

यह सरल, नीला और चौकोर है (यहाँ स्टाइल कोड्स को पकड़ो).

जावास्क्रिप्ट

और यहाँ कोड का मांस है, जावास्क्रिप्ट। यहां की योजना है जैसे ही उपयोगकर्ता इस पर क्लिक करते हैं, URL को हाइलाइट करें.

हम एक चर के साथ कोड शुरू करते हैं जो उस तत्व का चयन करता है जिसमें उपयोगकर्ता क्लिक करेगा.

 var target = document.querySelector ('। shortlink'); 

querySelector तत्व का चयन करने के लिए एक जावास्क्रिप्ट विधि है; यह मूल रूप से jQuery निर्माता की तरह काम करता है $ (). आप वर्ग द्वारा तत्व प्राप्त करने के लिए डॉट नोटेशन का उपयोग कर सकते हैं या # आईडी द्वारा एक तत्व प्राप्त करने के लिए अंकन.

अगला, हमें एक नया जावास्क्रिप्ट फ़ंक्शन बनाने की आवश्यकता है.

 समारोह चयन (चुनाव)  

हम अपने फंक्शन को नाम देते हैं चयन (). और जैसा कि आप ऊपर देख सकते हैं, फ़ंक्शन को उस तत्व को पारित करने के लिए एक पैरामीटर की आवश्यकता होती है जो URL या किसी भी नियमित पाठ को लपेटता है जिसे हम हाइलाइट करना चाहते हैं। हमारे मामले में, यह होगा अवधि के साथ तत्व shortlink__url कक्षा.

इस फ़ंक्शन के भीतर, हम कुछ और चर जोड़ते हैं:

 var target = document.querySelector ('। shortlink'); समारोह चयन (एलएम) var elem = document.querySelector (elem); var select = window.getSelection (); var रेंज = document.createRange ();  

पहले ELEM चर उस तत्व का चयन करता है जिसे हम फ़ंक्शन के पैरामीटर से गुजरते हैं। दूसरा चर, चुनते हैं, पाठ का चयन पाने के लिए एक देशी जावास्क्रिप्ट फ़ंक्शन चलाता है। आखिरी चर, रेंज चयन सीमा को नियंत्रित करता है; हम यह सुनिश्चित करना चाहेंगे कि चयन केवल चयनित तत्व के भीतर हो.

इसके बाद, हम इन चर को कुछ अन्य जावास्क्रिप्ट क्रियाओं के साथ श्रृंखलाबद्ध करते हैं:

 var target = document.querySelector ('। shortlink'); समारोह चयन (एलएम) var elem = document.querySelector (elem); var select = window.getSelection (); var रेंज = document.createRange (); range.selectNodeContents (ELEM); select.addRange (रेंज);  

पहला जोड़, range.selectNodeContents (ELEM), परिभाषित करता है चयन की सीमा इस मामले में जो तत्व के रूप में संदर्भित किया जा रहा है ELEM. आखिरी लाइन, select.addRange (सीमा) चयन को निर्दिष्ट सीमा तक सीमित करता है.

महान! हम सभी फ़ंक्शन के साथ सेट हैं। इसे कार्रवाई में लगाते हैं.

चलाओ

हम लक्ष्य तत्व को एक के साथ बांधते हैं क्लिक पर घटना। जैसा कि तत्व पर क्लिक किया जाता है, हम उस फ़ंक्शन को चलाते हैं जो हमने अभी बनाया है और उस तत्व के वर्ग नाम के साथ पैरामीटर पास करें जहां URL लिपटा है; इस मामले में यह है .shortlink__url.

 target.onclick = function () चयन ('। shortlink__url'); ; 

हमारा हो गया। जैसा कि पहले उल्लेख किया गया है, आप अपनी वेबसाइट पर अन्य प्रकार की सामग्री के लिए भी ऐसा कर सकते हैं, जिसे आप अपने उपयोगकर्ताओं को अधिक आसानी से कॉपी करना चाह सकते हैं.

आप में से कुछ सोच रहे होंगे कि क्या हम अपने आप हो सकते हैं प्रतिलिपि, केवल हाइलाइट करने के बजाय, उपयोगकर्ता क्लिक पर लघुकरण। हालांकि यह वास्तव में एक अच्छा विचार हो सकता है, दुर्भाग्य से इसे प्राप्त करना काफी आसान नहीं है और यह एक खराब उपयोगकर्ता अनुभव का कारण बन सकता है। प्रतिलिपि की कार्रवाई पूरी तरह से उपयोगकर्ता की सहमति के तहत होनी चाहिए.

इस पोस्ट के चरण केवल इसे हाइलाइट करने की क्रिया तक ले जाते हैं। हमारे उपयोगकर्ता इसे कॉपी करेंगे या नहीं यह पूरी तरह से उन पर निर्भर है.

आप डेमो देखने या स्रोत कोड डाउनलोड करने के लिए निम्न लिंक के माध्यम से अनुसरण कर सकते हैं.

• डेमो देखें
• स्रोत डाउनलोड करें