पिक्सेल contenteditable

Question

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

मैं कैरट स्थिति प्राप्त करने के लिए कैसे पता: document.getElementById('elm1_ifr').contentWindow.getSelection().anchorOffset

मैं इस का उपयोग div की left संपत्ति की गणना कर सकते हैं, लेकिन मैं यह पता लगाने की top पाने के लिए नहीं कर पा रहे।

एक और संभावना के बारे में मैं उपयोग कर रहा था सोचा: document.getElementById('elm1_ifr').contentWindow.getSelection().anchorNode.parentNode

और jQuery का उपयोग कर पाने के लिए ऑफसेट, लेकिन अगर यह है कि माता-पिता के लिए एक लंबे पाठ लाइन है, मैं सिर्फ पहली पंक्ति के शीर्ष स्थिति को निकालने के लिए सक्षम हो जाएगा ।

क्या कोई इस से मेरी सहायता कर सकता है?

Answer 1

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

इसका कारण यह है कि the spec for the getBoundingClientRect() method of Range की सावधानीपूर्वक पढ़ने से पता चलता है कि getBoundingClientRect() एक संक्षिप्त रेंज के लिए एक रेक्ट वापस करने के लिए बाध्य नहीं है। संकल्पनात्मक रूप से, दस्तावेज़ में हर स्थिति में एक अच्छी तरह परिभाषित बाध्य आयताकार नहीं है। हालांकि, देखभाल पर स्क्रीन पर भौतिक स्थान होता है, जो मेरी राय में चयन API द्वारा प्रदान किया जाना चाहिए, लेकिन वर्तमान में ब्राउज़र में यह उपलब्ध कराने के लिए कुछ भी नहीं है।

Answer 2

मैं आज इस समस्या में आया था। कुछ परीक्षण के बाद, मुझे यह काम मिल गया, बिना थैरी तत्व का उपयोग किए।

आईई में, ऑफसेट लेफ्ट और ऑफ़सेट के साथ इसे काम करना आसान है टेक्स्ट टेक्स्ट ऑब्जेक्ट की संपत्ति। हालांकि वेबकिट के लिए कुछ प्रयास की जरूरत है।

यहां एक परीक्षण है, आप परिणाम देख सकते हैं। http://jsfiddle.net/gliheng/vbucs/12/

var getCaretPixelPos = function ($node, offsetx, offsety){ 
    offsetx = offsetx || 0; 
    offsety = offsety || 0; 

    var nodeLeft = 0, 
     nodeTop = 0; 
    if ($node){ 
     nodeLeft = $node.offsetLeft; 
     nodeTop = $node.offsetTop; 
    } 

    var pos = {left: 0, top: 0}; 

    if (document.selection){ 
     var range = document.selection.createRange(); 
     pos.left = range.offsetLeft + offsetx - nodeLeft + 'px'; 
     pos.top = range.offsetTop + offsety - nodeTop + 'px'; 
    }else if (window.getSelection){ 
     var sel = window.getSelection(); 
     var range = sel.getRangeAt(0).cloneRange(); 
     try{ 
      range.setStart(range.startContainer, range.startOffset-1); 
     }catch(e){} 
     var rect = range.getBoundingClientRect(); 
     if (range.endOffset == 0 || range.toString() === ''){ 
      // first char of line 
      if (range.startContainer == $node){ 
       // empty div 
       if (range.endOffset == 0){ 
        pos.top = '0px'; 
        pos.left = '0px'; 
       }else{ 
        // firefox need this 
        var range2 = range.cloneRange(); 
        range2.setStart(range2.startContainer, 0); 
        var rect2 = range2.getBoundingClientRect(); 
        pos.left = rect2.left + offsetx - nodeLeft + 'px'; 
        pos.top = rect2.top + rect2.height + offsety - nodeTop + 'px'; 
       } 
      }else{ 
       pos.top = range.startContainer.offsetTop+'px'; 
       pos.left = range.startContainer.offsetLeft+'px'; 
      } 
     }else{ 
      pos.left = rect.left + rect.width + offsetx - nodeLeft + 'px'; 
      pos.top = rect.top + offsety - nodeTop + 'px'; 
     } 
    } 
    return pos; 
};