दिलचस्प पोस्ट
एक्सेल इंटरऑप – दक्षता और प्रदर्शन X 86 पेजिंग कैसे काम करता है? मेरे 'तीसरे पक्ष सर्वर' पर जीकेएलोकलप्लेयर को प्रमाणित करने के लिए कैसे? क्या HTML विशेषताओं की लंबाई की कोई सीमा है? अजगर में एक इनपुट से दो मान? रेल: स्वयं में शामिल होने की योजना है has_and_belongs_to_many? एंड्रॉइड स्टूडियो में ग्रेडल क्या है? वर्णनकर्ता को पढ़ने के लिए गैर-अवरुद्ध कॉल क्या मैं अपना स्पष्ट प्रकार तुलनित्र इनलाइन निर्दिष्ट कर सकता हूं? पॉपअप Window – जब बाहर क्लिक किया तो ख़ारिज करें मैं पर्ल में उद्धृत CSV को एक regex के साथ कैसे पार्स कर सकता हूं? छवि को वेबसाइट से स्थानीय फ़ाइल में खींचने के लिए httpwebrequest का उपयोग कैसे करें अजगर sqlite3 में मौजूदा डीबी फ़ाइल मेमोरी में कैसे लोड करें? क्या इसमें $ _SERVER का उपयोग करना एक अच्छा विचार है? अनियमित आकार वाले बहुभुज के "दृश्य" केंद्र को खोजने का सबसे तेज़ तरीका क्या है?

अपने पैरेंट कंटेनर के संबंध में एक श्रेणी की शुरुआत और अंत ऑफसेट प्राप्त करें

मान लीजिए मेरे पास यह HTML तत्व है:

<div id="parent"> Hello everyone! <a>This is my home page</a> <p>Bye!</p> </div> 

और उपयोगकर्ता अपने माउस के साथ "घर" का चयन करता है।

मैं यह निर्धारित करने में सक्षम होना चाहता हूं कि # कैरेक्टर में कितने अक्षर उनका चयन शुरू होता है (और #parent के अंत से कितने अक्षर उसके चयन समाप्त होते हैं) अगर वह HTML टैग का चयन करता है तो भी उसे काम करना चाहिए। (और मुझे इसकी ज़रूरत है कि वह सभी ब्राउज़रों में काम करे)

range.startOffset आशाजनक लग रहा है, लेकिन यह सीमा के तत्काल कंटेनर के लिए केवल ऑफसेट है, और यह एक चरित्र ऑफसेट है, अगर कंटेनर एक पाठ नोड है

Solutions Collecting From Web of "अपने पैरेंट कंटेनर के संबंध में एक श्रेणी की शुरुआत और अंत ऑफसेट प्राप्त करें"

अद्यतन करें

जैसा कि टिप्पणियों में बताया गया है, मेरा मूल उत्तर (नीचे) केवल चयन या कैरेट स्थिति का अंत देता है। शुरूआत और अंत ऑफसेट वापस करने के लिए कोड को अनुकूलित करना काफी आसान है; यहां ऐसा एक उदाहरण है जो ऐसा करता है:

 function getSelectionCharacterOffsetWithin(element) { var start = 0; var end = 0; var doc = element.ownerDocument || element.document; var win = doc.defaultView || doc.parentWindow; var sel; if (typeof win.getSelection != "undefined") { sel = win.getSelection(); if (sel.rangeCount > 0) { var range = win.getSelection().getRangeAt(0); var preCaretRange = range.cloneRange(); preCaretRange.selectNodeContents(element); preCaretRange.setEnd(range.startContainer, range.startOffset); start = preCaretRange.toString().length; preCaretRange.setEnd(range.endContainer, range.endOffset); end = preCaretRange.toString().length; } } else if ( (sel = doc.selection) && sel.type != "Control") { var textRange = sel.createRange(); var preCaretTextRange = doc.body.createTextRange(); preCaretTextRange.moveToElementText(element); preCaretTextRange.setEndPoint("EndToStart", textRange); start = preCaretTextRange.text.length; preCaretTextRange.setEndPoint("EndToEnd", textRange); end = preCaretTextRange.text.length; } return { start: start, end: end }; } function reportSelection() { var selOffsets = getSelectionCharacterOffsetWithin( document.getElementById("editor") ); document.getElementById("selectionLog").innerHTML = "Selection offsets: " + selOffsets.start + ", " + selOffsets.end; } window.onload = function() { document.addEventListener("selectionchange", reportSelection, false); document.addEventListener("mouseup", reportSelection, false); document.addEventListener("mousedown", reportSelection, false); document.addEventListener("keyup", reportSelection, false); }; 
 #editor { padding: 5px; border: solid green 1px; } 
 Select something in the content below: <div id="editor" contenteditable="true">A <i>wombat</i> is a marsupial native to <b>Australia</b></div> <div id="selectionLog"></div> 

मुझे पता है कि यह एक साल पुराना है, लेकिन कैरेट की स्थिति तलाशने पर बहुत सारे सवालों के लिए यह पोस्ट एक शीर्ष खोज परिणाम है और मुझे यह उपयोगी पाया गया है।

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

मैंने पहली बार कुछ पंक्तियों को जोड़ दिया है अगर बयान दर्ज करने के लिए कि क्या पाठ का चयन किया गया है और उसके अनुसार परिणाम समायोजित करें। नया बयान नीचे है मुझे माफ़ कर दें अगर इसे यहां जोड़ने के लिए अनुचित है, क्योंकि ओपी क्या करने की कोशिश नहीं कर रहा था, लेकिन जैसा कि मैंने कहा, कैरेट की स्थिति से संबंधित जानकारी पर कई खोजों ने मुझे इस पद पर ले जाया, इसलिए यह उम्मीद है कि किसी और को मदद मिलेगी ।

टिम की पहली यदि बयान जोड़ा लाइनों (*) के साथ:

 if (typeof window.getSelection != "undefined") { var range = window.getSelection().getRangeAt(0); var selected = range.toString().length; // * var preCaretRange = range.cloneRange(); preCaretRange.selectNodeContents(element); preCaretRange.setEnd(range.endContainer, range.endOffset); if(selected){ // * caretOffset = preCaretRange.toString().length - selected; // * } else { // * caretOffset = preCaretRange.toString().length; } // * }