div में कुछ पाठ का चयन कैसे अक्षम करें?

Question

चलो कहते हैं कि मैं इस तरह के रूप चिह्न के साथ एक पाठ, करते हैं:

और मैं इस तरह के का चयन है कि शुरू करने या चयन के अंत निशान में नहीं है अक्षम करना चाहते हैं। इसलिए, इन चुनावों के सभी संभव होना चाहिए:

दूसरी ओर, इन चुनावों अक्षम है या नहीं:

अब तक, मैं केवल कुछ सरल सीएसएस उपयोग करने की कोशिश,

mark { 
 
    -khtml-user-select: all; 
 
    -webkit-user-select: all; 
 
    -o-user-select: all; 
 
    user-select: all; 
 
}

This is <mark>marked text</mark>. I want to disable selecting only part of <mark>marked text</mark>.

jsfiddle link

वहाँ यह करने के लिए कोई तरीका है? किसी भी जवाब की सराहना की जाएगी!

---

मैंने जो हासिल करना चाहता था, हासिल किया, इसलिए मैं इसे यहां साझा करता हूं।

function checkSelection() { 
 
    var sel = window.getSelection(); 
 
    var marks = document.getElementsByTagName('mark'); 
 
    for(var i = 1; i < sel.rangeCount; i++) { 
 
    sel.removeRange(sel.getRangeAt(i)); 
 
    } 
 
    var range = sel.getRangeAt(0); 
 
    var startnode = range.startContainer; 
 
    var endnode = range.endContainer; 
 
    for (var i = 0; i < marks.length; i++) { 
 
    \t if (marks[i].contains(startnode)) { 
 
     range.setStartBefore(startnode); 
 
    } 
 
    \t if (marks[i].contains(endnode)) { 
 
     range.setEndAfter(endnode); 
 
    } 
 
    } 
 
} 
 

 
document.addEventListener('mouseup', checkSelection) 
 
document.addEventListener('touchend', checkSelection)

This is <mark>marked text</mark>. I want to disable selecting only part of <mark>marked text</mark>.

jsfiddle link

Answer 1

मुझे नहीं लगता कि अकेले सीएसएस के साथ करना संभव होगा, आपको यह पता लगाने के लिए जावास्क्रिप्ट की आवश्यकता होगी कि उपयोगकर्ता किस तत्व को चुनना शुरू कर रहा है।

---

मैं क्या मैं चयन एपीआई से containsNode विधि का इस्तेमाल किया (एक कार्यकारी ड्राफ्ट, फिर भी सभी ब्राउज़रों के साथ काम नहीं कर सकते हैं और पदावनत किया जा सकता है) क्या चयनित श्रेणी का पता लगाने के था तो पूरा होता है चिह्नित तत्व या बिल्कुल नहीं। यदि चयन में केवल चिह्नित तत्व का हिस्सा होता है, तो यह removeAllRanges विधि का उपयोग करके चयन को साफ़ कर देगा।

function checkSelection() { 
 
    var sel = window.getSelection() 
 
    var marks = document.getElementsByTagName('mark') 
 
    for (var i = 0; i < marks.length; i++) { 
 
    if (sel.containsNode(marks[i], false) !== sel.containsNode(marks[i], true)) 
 
     sel.removeAllRanges() // clear selection 
 
    } 
 
} 
 

 
document.addEventListener('mouseup', checkSelection) 
 
document.addEventListener('touchend', checkSelection)

mark { 
 
    background: yellow; 
 
}

This is <mark>marked text</mark>. I want to disable selecting only part of <mark>marked text</mark>.

ध्यान दें कि आप माउस की घटनाओं और स्पर्श की घटनाओं (सभी कि मैं शामिल है), कीबोर्ड कैरट चयन, या कार्यक्रम संबंधी चयन के द्वारा, जो आप चाहते चयन के सभी तरीकों पर कब्जा करने के लिए कि क्या आवश्यकता होगी।

---

यह बढ़ाया जा सकता है और अपनी पसंद को देखते हैं, लेकिन यह व्यवहार आप अपने चश्मा से चाहते हैं नकल पर मेरे सबसे अच्छे शॉट है। उपर्युक्त स्निपेट हर समय सही तरीके से काम नहीं करता है अगर चयन क्षेत्र की सीमा किसी एक चिह्नित क्षेत्र के किनारे से शुरू होती है या समाप्त होती है, लेकिन स्निपेट को किनारे के लिए थोड़ा ठीक-ट्यूनिंग के साथ काम करना चाहिए, इसके पीछे मूल अवधारणा का प्रदर्शन करना चाहिए मामलों।

Answer 2

उपयोगकर्ता के चयन सीएसएस संपत्ति अभी तक आधिकारिक नहीं है और यह केवल नवीनतम ब्राउज़र द्वारा समर्थित है।

फिर भी आप user-select: none; का उपयोग करें और सभी पाठ को एक span टैग

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

अंदर नहीं चुना जा सकता लगा लेकिन आप इस

.unselectable { 
 
    -moz-user-select: none; 
 
    -webkit-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
}

<p>This text can be selected, But <span class="unselectable">this</span> can only be <span class="unselectable">partially se</span>lected</p>

की तरह कुछ कोशिश कर सकते हैं कर सकते हैं

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select