अवांछित मजकूर निवड प्रतिबंधित
स्टॅक ओव्हरफ्लो साइडबारवरील (प्रश्न, टॅग आणि वापरकर्ते) सारख्या बटणांप्रमाणे कार्य करणाऱ्या अँकरसाठी, वापरकर्ते चुकून मजकूर हायलाइट करतात तेव्हा ते निराश होऊ शकते. जेव्हा हे घटक नॅव्हिगेशन किंवा कृतींसाठी वापरले जातात, जेथे मजकूर निवड अनपेक्षित असते तेव्हा असे होते.
JavaScript मजकूर निवड रोखण्यासाठी उपाय ऑफर करत असताना, CSS मानक-अनुरूप पद्धत प्रदान करते का हे जाणून घेणे फायदेशीर आहे. हा लेख CSS वापरून मजकूर निवड हायलाइटिंग अक्षम कसे करावे आणि हा प्रभाव साध्य करण्यासाठी सर्वोत्तम पद्धतींवर चर्चा करतो.
| आज्ञा | वर्णन |
|---|---|
| -webkit-user-select | सफारी ब्राउझरमध्ये मजकूर निवड अक्षम करण्यासाठी CSS गुणधर्म. |
| -moz-user-select | फायरफॉक्स ब्राउझरमध्ये मजकूर निवड अक्षम करण्यासाठी CSS गुणधर्म. |
| -ms-user-select | इंटरनेट एक्सप्लोरर 10+ मध्ये मजकूर निवड अक्षम करण्यासाठी CSS गुणधर्म. |
| user-select | आधुनिक ब्राउझरमध्ये मजकूर निवड अक्षम करण्यासाठी मानक CSS गुणधर्म. |
| onselectstart | घटकावरील मजकूर निवड रोखण्यासाठी JavaScript इव्हेंट हँडलर. |
| querySelectorAll | निवडकर्त्यांच्या निर्दिष्ट गटाशी जुळणारे सर्व घटक निवडण्यासाठी JavaScript पद्धत. |
मजकूर निवड अक्षम करण्यासाठी स्क्रिप्ट समजून घेणे
CSS वापरून मजकूर निवड हायलाइटिंग अक्षम करण्यासाठी, आम्ही लागू करतो -webkit-user-select, १, -ms-user-select, आणि user-select गुणधर्म क्रॉस-ब्राउझर सुसंगतता सुनिश्चित करून हे गुणधर्म भिन्न ब्राउझरसाठी पूर्ण करतात. या गुणधर्मांवर सेट करून none, मजकूर निवड अक्षम केली आहे, वापरकर्त्यांना सह घटकांमधील मजकूर हायलाइट करण्यापासून प्रतिबंधित करते ५ वर्ग
JavaScript उदाहरणामध्ये, आम्ही डॉक्युमेंटमध्ये इव्हेंट श्रोता जोडतो जो एकदा डीओएम सामग्री पूर्णपणे लोड झाल्यानंतर कार्यान्वित करतो. द querySelectorAll पद्धत सह सर्व घटक निवडते ५ वर्ग प्रत्येक निवडलेल्या घटकासाठी, द onselectstart परत येण्यासाठी इव्हेंट ओव्हरराइड केला आहे ९, मजकूर निवड प्रतिबंधित करते. CSS आणि JavaScript चे हे संयोजन विविध ब्राउझर आणि परिस्थितींमध्ये मजकूर निवड अक्षम करण्यासाठी एक मजबूत उपाय सुनिश्चित करते.
मजकूर निवड अक्षम करण्यासाठी CSS पद्धत
मजकूर निवड अक्षम करण्यासाठी CSS वापरणे
/* CSS to disable text selection */.no-select {-webkit-user-select: none; /* Safari */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* IE 10+ */user-select: none; /* Standard */}
मजकूर निवड प्रतिबंधित करण्यासाठी JavaScript दृष्टीकोन
मजकूर निवड अक्षम करण्यासाठी JavaScript उपाय
१व्यावहारिक अनुप्रयोगासाठी CSS आणि HTML एकत्र करणे
CSS आणि HTML सह व्यावहारिक उदाहरण
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.no-select {-webkit-user-select: none; /* Safari */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* IE 10+ */user-select: none; /* Standard */}</style></head><body><div class="no-select">Non-selectable text</div></body></html>
पुढील उपाय शोधत आहे
वेब ऍप्लिकेशन्समध्ये मजकूर निवड प्रतिबंधित करण्याचा आणखी एक दृष्टीकोन वापरणे आहे draggable HTML मध्ये विशेषता. ही विशेषता, वर सेट केल्यावर ९, घटक निवडले किंवा ड्रॅग केले जाऊ शकत नाही याची खात्री करते, वापरकर्त्याच्या परस्परसंवादांवर नियंत्रणाचा दुसरा स्तर प्रदान करते. हे विशेषतः बटणे आणि टॅब सारख्या परस्परसंवादी घटकांसाठी उपयुक्त असू शकते जे हायलाइट केले जाऊ नये किंवा चुकून हलविले जाऊ नये.
याव्यतिरिक्त, द pointer-events CSS प्रॉपर्टीचा वापर केला जाऊ शकतो. सेटिंग करून pointer-events: none, तुम्ही घटकातील मजकूर न निवडता येणारा बनवू शकता. तथापि, ही पद्धत क्लिक करणे सारख्या इतर परस्परसंवादांना देखील अक्षम करते, जे सर्व वापर प्रकरणांसाठी इष्ट असू शकत नाही. योग्य पद्धत निवडताना उपयोगिता आणि कार्यक्षमता संतुलित करणे महत्त्वाचे आहे.
सामान्य प्रश्न आणि उपाय
- मी CSS वापरून मजकूर निवड कशी रोखू शकतो?
- वापरा user-select मालमत्ता सेट केली आहे none इच्छित घटकांसाठी.
- मजकूर निवड अक्षम करण्यासाठी JavaScript पद्धत आहे का?
- होय, सेट करून onselectstart परत येण्याची घटना ९ लक्ष्यित घटकांवर.
- काय आहे -webkit-user-select मालमत्ता?
- सफारी आणि क्रोम ब्राउझरमध्ये मजकूर निवड अक्षम करण्यासाठी वापरला जाणारा CSS गुणधर्म आहे.
- मी वापरू शकतो pointer-events मजकूर निवड टाळण्यासाठी?
- होय, सेटिंग pointer-events करण्यासाठी none मजकूर निवड रोखू शकते परंतु इतर परस्परसंवाद देखील अक्षम करते.
- काय करते draggable विशेषता करू?
- द draggable विशेषता, वर सेट केल्यावर ९, घटक निवडण्यापासून किंवा ड्रॅग करण्यापासून प्रतिबंधित करते.
- CSS सह सर्व ब्राउझर लक्ष्य करण्याचा एक मार्ग आहे का?
- वापरा -webkit-user-select, १, -ms-user-select, आणि user-select गुणधर्म एकत्र.
- मजकूर निवड अक्षम करण्यासाठी काही नकारात्मक बाजू आहेत का?
- मजकूर निवड अक्षम केल्याने परस्परसंवादी घटकांसाठी वापरकर्ता अनुभव सुधारू शकतो परंतु काही वापरकर्त्यांसाठी प्रवेशयोग्यतेमध्ये अडथळा येऊ शकतो.
- मजकूर निवड केवळ विशिष्ट घटकांसाठी अक्षम केली जाऊ शकते?
- होय, तुम्ही बटणे किंवा टॅब सारख्या विशिष्ट घटकांवर गुणधर्म किंवा इव्हेंट हँडलर लागू करू शकता.
- मजकूर निवड अक्षम करण्यासाठी सर्वोत्तम पद्धती कोणत्या आहेत?
- क्रॉस-ब्राउझर सुसंगततेसाठी CSS आणि JavaScript पद्धती एकत्र करा आणि वापरण्याशी तडजोड होणार नाही याची खात्री करा.
मजकूर निवड अक्षम करण्यावरील अंतिम विचार
मजकूर निवड हायलाइटिंग प्रतिबंधित करणे परस्परसंवादी वेब घटकांची उपयोगिता वाढवते. CSS गुणधर्म वापरणे जसे user-select ब्राउझर-विशिष्ट उपसर्गांसह सर्व प्रमुख ब्राउझरमध्ये सुसंगतता सुनिश्चित करते. याव्यतिरिक्त, मजकूर निवड व्यवस्थापित करण्यासाठी JavaScript समाविष्ट करणे एक मजबूत समाधान प्रदान करते. योग्यरित्या अंमलात आणल्यावर, ही तंत्रे बटणे किंवा टॅब म्हणून काम करणाऱ्या घटकांमधील अपघाती मजकूर निवड रोखून, अवांछित हायलाइटिंगशिवाय गुळगुळीत परस्परसंवाद सुनिश्चित करून वापरकर्ता अनुभव सुधारतात.