संतोषजनक div: IE8 HTML तत्व

Question

के बैकस्पेस हटाने से खुश नहीं है I कर्सर स्थिति पर HTML डालने के लिए rangy जावास्क्रिप्ट लाइब्रेरी के साथ संयोजन में एक सामग्री योग्य div का उपयोग कर रहा हूं।

दिन के अंत div की सामग्री को आमतौर पर लगता है कि:

<div contenteditable="true"> 
    "Hello " 
    <button contenteditable="false" data-id="147">@John Smith</button> 
    " " 
</div> 

उपयोगकर्ता दबाने पर सुझाव मिल '@' और जब (Google प्लस आला) का चयन किया बाद में एक बटन के रूप डाला मिलता है। मैं इस बटन के बाद   भी डालता हूं।

बटन क्रोम/सफारी/फ़ायरफ़ॉक्स में हटा दिया जाता है जब आप बैकस्पेस हिट (प्रथम   हटाने के बाद), लेकिन IE8 में नहीं। IE8 में कर्सर केवल इसे हटाए बिना बटन पर कूदता है। आईई 8 में और भी विचित्र बात यह है कि यदि आप बटन के बगल में   छोड़ते हैं - और बटन के बगल में कर्सर रखें - यह बैकस्पेस पर बटन हटा देता है। इसलिए कर्सर के दाईं ओर   है जब यह खुश है।

क्या कोई जानता है कि आईई 8 काम करने के लिए मुझे क्या चाहिए I.t.o. कर्सर के दाईं ओर   की आवश्यकता के बिना बैकस्पेस पर बटन को हटा रहा है? (इस अजीब व्यवहार पर कुछ जानकारी भी मदद कर सकती है)

पीएस मैं IE

Answer 1

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

लाइव डेमो: http://jsfiddle.net/timdown/vu3ub/

कोड:

document.onkeypress = function(e) { 
    e = e || window.event; 
    var keyCode = e.which || e.keyCode; 
    if (keyCode !== 8) { 
     return; 
    } 

    var sel = rangy.getSelection(); 
    if (sel.rangeCount === 0) { 
     return; 
    } 

    var selRange = sel.getRangeAt(0); 
    if (!selRange.collapsed) { 
     return; 
    } 

    var nonEditable = document.getElementById("nonEditable"); 
    if (!nonEditable) { 
     return; 
    } 

    // Check the caret is located after the non-editable element 
    var range = rangy.createRange(); 
    range.collapseAfter(nonEditable); 

    if (selRange.compareBoundaryPoints(range.START_TO_END, range) == -1) { 
     return; 
    } 

    // Check whether there is any text between the caret and the 
    // non-editable element. If not, delete the element and move 
    // the caret to where it had been 
    range.setEnd(selRange.startContainer, selRange.startOffset); 
    if (range.toString() === "") { 
     selRange.collapseBefore(nonEditable); 
     nonEditable.parentNode.removeChild(nonEditable); 
     sel.setSingleRange(selRange); 

     // Prevent the default browser behaviour 
     return false; 
    } 
}; 

Answer 2

के अन्य संस्करणों का परीक्षण नहीं किया मैं बटन लगाने के लिए चयन की सीमा को देखो और startContainer की previousSibling संपत्ति का उपयोग करने के लिए कैसे की एक त्वरित नमूने के साथ एक jsfiddle बनाया: jsfiddle

कर्सर को aaa में रखें और यह दिखाएगा कि बटन पिछला भाई है। इसे सीसीसी में डालें और बीबीबी दिखाएगा।

तो इसके साथ आप div की कीडाउन घटना को संभाल सकते हैं, जांचें कि क्या कुंजी बैकस्पेस है + पिछली सिब्लिंग आपका बटन है, और इसे jQuery के साथ हटा दें।

पिछला सिब्लिंग शून्य है, हालांकि यह टेक्स्टनोड है, केवल FYI।