पाठ स्थिति

Question

चयनित हो रही है वर्तमान में एक मैं ब्राउज़र में चयनित पाठ यह कर हो रही है:

window.getSelection(); 

अब मैं जब एक कस्टम कुंजी दबाने कि पाठ के ऊपर एक टूलटिप दिखाने की जरूरत है (ध्यान दें कि माउस सका अब टेक्स्ट पर न हों), इसलिए ऐसा करने के लिए मुझे उस चयनित टेक्स्ट की पूर्ण स्थिति की आवश्यकता है।

क्या ऐसा करने का कोई तरीका है, शायद उस पाठ को टैग के अंदर लपेटकर और ऑफसेट प्राप्त करना?

कोई आइडिया?

पुनश्च: सभी ब्राउज़रों के लिए नहीं, क्रोम से काम करना है।

PS2: मेरी क्रैपी अंग्रेजी के लिए खेद है।

Answer 1

सबसे आसान तरीका चयन के प्रारंभ या समाप्ति पर अस्थायी मार्कर तत्व डालना और इसकी स्थिति प्राप्त करना सबसे आसान तरीका है। मैं प्रदर्शन किया है कैसे स्टैक ओवरफ़्लो पर पहले यह करने के लिए: How can I position an element next to user text selection?

Answer 2

s = window.getSelection(); 

एक चयन देता है। तो

s = window.getSelection(); 
oRange = s.getRangeAt(0); //get the text range 
oRect = oRange.getBoundingClientRect(); 

oRect क्लाइंट (निश्चित) निर्देशांक में बाध्य आयताकार होगा।

Answer 3

getBoundingClientRect उपयोग करने से पहले, आप को पता है this note की जरूरत है:

CSSOM काम कर मसौदा यह बताता है कि यह प्रत्येक सीमा बॉक्स के लिए एक ClientRect रिटर्न

और यह 'मानक' द्वारा:

एक इनलाइन तत्व के लिए, दो परिभाषाएं समान हैं। लेकिन ब्लॉक तत्व के लिए, मोज़िला केवल एक आयताकार लौटाएगा।

तो अगर इस पोस्ट को पढ़ने के किसी को भी और अधिक सटीक स्थिति और चयनित ग्रंथों के लेआउट के लिए एक सामान्य समाधान चाहता है, मैं निम्नलिखित दृष्टिकोण का सुझाव:

विकल्प 1: सटीक शुरू करने और और समाप्त होने के ग्रंथों के बिंदु का पता लगाएं inserting invisible elements द्वारा। फिर निकाले गए गणना आय ऊंचाई और कंटेनर चौड़ाई के साथ चयनित रेखा आयताकारों की गणना करें। उपयोग में एपीआई: window.getComputedStyle।

• प्रो: परिणाम टेक्स्ट की प्रत्येक पंक्ति के लिए सबसे सटीक होगा।
• कॉन: 1) यदि चयन अलग-अलग रेखा ऊंचाई और चौड़ाई वाले कई नोड्स में है, तो एल्गोरिदम जटिल हो जाता है। 2) और आपको गणना एल्गोरिदम लागू करने की आवश्यकता है, जो एक साधारण सुविधा को लागू करते समय बहुत समय ले रहा है।

विकल्प 2: लपेटें एक सावधानी स्टाइल इनलाइन तत्व के साथ प्रत्येक पाठ, प्रत्येक बॉक्स की लेआउट निकालने, और लाइनों में परिणाम मर्ज करें।

• प्रो: सभी निरंतर चयन के लिए काम करता है (कि मूल रूप से वर्तमान मुख्यधारा ब्राउज़र कार्यान्वयन में सभी मामलों का मतलब है।)। ग्रंथों की प्रत्येक पंक्ति के लिए पर्याप्त पर्याप्त सटीकता।
• कॉन: 1) इसके परिणाम कुछ मामलों में थोड़ा गलत है, क्योंकि यह kerning की त्रुटि चौड़ाई जोड़ता है। 2) यह ग्रंथों के बहुत बड़े चयन पर धीमा है।

विकल्प 2 के लिए, rangeblock जो आप पाठ की प्रत्येक पंक्ति की मुक्ति लेआउट देता है एक आसान एपीआई के साथ एक वर्तमान दिया गया है:

let block = rangeblock.extractSelectedBlock(window, document); 
console.info("Text layout: " + JSON.stringify(block.dimensions)); 
// output: Text layout: {Left: 100, Top: 90, Width: 200, Height: 50} 

की