के साथ चयन करने योग्य लिंक में टेक्स्ट बनाएं मैं एक साइट पर काम कर रहा हूं, जो प्रसिद्ध उद्धरण एकत्र करता है। उद्धरण का पाठ कुछ और करने का एक लिंक है [...] लेकिन मैं यह भी चाहता हूं कि उपयोगकर्ता उद्धरण के पाठ का चयन और प्रतिलिपि बना सके।सीएसएस
लेकिन लगभग हर ब्राउज़र में उपयोगकर्ता आसानी से लिंक में टेक्स्ट का चयन नहीं कर सकता है।
क्या यह सीएसएस में इसे ओवरराइड करना संभव है और उपयोगकर्ता को टेक्स्ट का चयन करना संभव बनाता है?
नहीं, लेकिन आपके पास एक लिंक में टेक्स्ट का भारी ब्लॉक नहीं होना चाहिए - एक लिंक आदर्श रूप से केवल एक या दो शब्द होना चाहिए, पूरे पैराग्राफ में नहीं।
आप नहीं कर सकते। हालांकि, आप एक तत्व को एक लिंक की तरह दिख सकते हैं लेकिन वास्तव में "लिंक" भाग को संभालने के लिए जेएस का उपयोग कर सकते हैं।
jQuery:
$(".q").click(function() {
window.location.href=$(this).attr('data-link');
});
HTML:
<span data-link="link.html" class="q">text here</span>
सीएसएस (यह "हाथ" कर्सर देने के लिए)
.q {
cursor: pointer;
}
मैं सिर्फ रखेंगे उद्धरण बस पाठ (कोई लिंक नहीं) और फिर अधिक जानकारी के लिए अंत में एक छोटा लिंक जोड़ें या जो कुछ भी हो।
यह केवल तभी काम करता है यदि आप संपूर्ण लिंक का चयन करते हैं, या बीच से एक छोर तक। यदि आप बीच में एक वाक्यांश चुनते हैं, तो यह विंडोज़ ट्रिगर करेगा। स्थान –
यदि आप नियमित पाठ पर लिंक कार्यक्षमता को लागू करने के लिए जावास्क्रिप्ट का उपयोग करते हैं, तो आप स्क्रीन पाठकों या लोगों के लिए एक प्रमुख पहुंच समस्या बनाते हैं जिनके ब्राउज़र में जावास्क्रिप्ट अक्षम है (प्रति कॉर्पोरेट नीति या सुरक्षा कारणों से।) –
@ForteL।, अच्छी पकड़। रॉड्डी: हाँ। जैसे मैंने कहा, मैं इसे इस तरह से नहीं करूँगा, बस एक संभावित समाधान की पेशकश कर रहा हूं। – sachleen
यह वास्तव में सीएसएस के लिए एक नौकरी नहीं है, क्योंकि यह कार्यक्षमता है, प्रतिपादन नहीं करता है। और यह एक कठिन मुद्दा है, क्योंकि एक लिंक पर एक क्लिक का मतलब लिंक के बाद होना चाहिए, और इसे तोड़ने से बड़ी उपयोगिता समस्या पैदा होगी।
सबसे अच्छा तरीका उद्धरण लिंक बनाने से बचने और उनके साथ अलग-अलग लिंक का उपयोग करना है। उदाहरण के लिए, उद्धरण के नीचे क्रेडिट, या क्रेडिट में उद्धृत संसाधन का नाम, एक प्राकृतिक लिंक होगा। और यदि आप "कुछ और करें" पर क्लिक करना चाहते हैं, तो शायद आपको कोटेशन से जुड़े बटन, लिंक नहीं चाहिए।
मैं आपकी साइट को कार्रवाई में देखे बिना नहीं बता सकता, लेकिन मुझे संदेह है कि समस्या यह है कि आपके लिंक टैग में केवल उद्धरण से अधिक है।
यदि लिंक "होना या नहीं होना - यह प्रश्न है" के रूप में दिखाता है, तो इसे चुनना किसी भी अन्य प्रश्न का चयन करने जैसा ही होना चाहिए। यदि लिंक है "यहां एक महान उद्धरण है: 'होना या नहीं होना - यही सवाल है। कुछ और करने के लिए यहां क्लिक करें!" तो वे बीच में पाठ का चयन करने में सक्षम नहीं होंगे, जो वे चाहते हैं।
सुनिश्चित करें कि आपका लिंक टेक्स्ट केवल वह पाठ है जिसे वे चुनना चाहते हैं, और टैग के बाहर कुछ भी डालें, और आप ठीक होंगे।
मुझे लगता है कि ओपी अपने उपयोगकर्ताओं को उद्धरण के * भाग * का चयन करने की अनुमति देना चाहता है। –
फ़ायरफ़ॉक्स में, आप Alt कुंजी दबाकर और फिर माउस के साथ सामान्य रूप से चयन करके हाइपरलिंक्स के कुछ हिस्सों का चयन कर सकते हैं। तो एक विकल्प jQuery का उपयोग कर कुछ लागू करने के लिए है: यदि Alt कुंजी दबाया जाता है (या एक कुंजी जो आप असाइन करते हैं) और माउस पॉइंटर लिंक पर है, तो लिंक को अक्षम करें। जब कुंजी जारी की जाती है तो लिंक सक्षम करें। बेशक आपको अपने उपयोगकर्ताओं को चयन करने के बारे में बताना होगा।
जाहिर है यह क्रोम पर भी काम करता है। पारितोषिक के लिए धन्यवाद! – cvsguimaraes
यहां एक विधि है जिसके साथ मैं आया हूं।
यह <a> टैग के बजाय <span> का उपयोग करता है, लेकिन कुछ बोनस के साथ एक नियमित लिंक की तरह व्यवहार करता है। जब आप टेक्स्ट को रोल करते हैं, तो 500 मिलीसेकेंड टाइमआउट होता है जो कर्सर को टेक्स्ट चयन कर्सर में बदल देगा। टेक्स्ट पर क्लिक करने और खींचने से क्लिक एक्शन ट्रिगर नहीं होता है, हालांकि टेक्स्ट पर डबल क्लिक (पूरे शब्दों का चयन करने के लिए) अभी भी क्लिक इवेंट ट्रिगर करता है। यह सुधार किया जा सकता है, लेकिन यह अच्छी तरह से काम करता है और उत्पादन में इस्तेमाल किया जा सकता है।
टाइमआउट निष्पादित होने पर यह और भी बेहतर होगा, यह बटन के ऊपरी दाएं भाग में एक छोटा क्लिपबोर्ड आइकन भी दिखाता है जिसे वे टेक्स्ट को अपने क्लिपबोर्ड पर कॉपी करने के लिए क्लिक कर सकते हैं। जब आप बटन के .mouseout() पर यह क्लिपबोर्ड आइकन छुपाएंगे।
इसके अतिरिक्त, जब माउस बटन छोड़ देता है तो टेक्स्ट चयन को साफ़ करने के लिए एक और विशेषता हो सकती है। (Clear Text Selection with JavaScript)
एचटीएमएल
<span data-href="javascript:alert('This is the click action.');" class="link selectable">
<span>[email protected]</span>
</span>
सीएसएस
.link {
font: 16px/0 Tahoma, sans-serif;
padding: 15px 30px;
border: 1px solid #0079be;
border-radius: 4px;
color: #0079be;
cursor: pointer;
}
.link:hover {
color: #fff;
background: #0079be;
}
.link.selectable > span {
display: inline-block;
}
.link.selectable.selecting > span {
cursor: text;
}
जावास्क्रिप्ट
$('.link.selectable > span').hover(
function() {
var selectableTimeout = setTimeout(
function(elem) {
$(elem).parent().addClass('selecting');
},
500, this
);
$(this).data('selectableTimeout', selectableTimeout);
},
function() {
clearTimeout($(this).data('selectableTimeout'));
$(this).parent().removeClass('selecting');
}
);
$('.link.selectable').mousedown(
function(e) {
$(this).data('mouseX', e.pageX);
$(this).data('mouseY', e.pageY);
}
);
$('.link.selectable').mouseup(
function(e) {
var mouseX = $(this).data('mouseX');
var mouseY = $(this).data('mouseY');
if (mouseX && mouseY && mouseX === e.pageX && mouseY === e.pageY) {
window.location.href = $(this).attr('data-href');
}
}
);
रखें लंगर एक पैराग्राफ टैग के अंदर टैग और यह चयन के साथ ही क्लिक किया जा सकता है, इस
<p><a href="#">Click Me</a></p>
सरल और आसान की तरह।
मुझे लगता है कि आपको पहले यह काम करने की ज़रूरत है कि आप इस काम की कल्पना कैसे करते हैं। अगर आप उस पर क्लिक करते हैं तो आपको लिंक पर कैसे पहुंचाया जाएगा? यदि आप उस पर क्लिक नहीं कर सकते हैं तो आप टेक्स्ट का चयन कैसे करेंगे? –