जब सामग्री के माध्यम से संतोषजनक डीआईवी का एक बच्चा तत्व संपादित किया जाता है तो कैसे पता लगाया जाए?

Question

इस एचटीएमएल कोड को देखते हुए:

<div contenteditable> 
    .... 
    <span> child-element </span> 
    .... 
</div> 

जब उपयोगकर्ता स्पैन तत्व पर क्लिक करता है (इसके अंदर कैरेट रखने के लिए), और उसके बाद कीबोर्ड पर एक वर्ण कुंजी दबाता है (टेक्स्ट-सामग्री को संपादित करने के लिए स्पैन तत्व का), एक keydown, keypress, और keyup ईवेंट निकाल दिया जाएगा।

हालांकि, उन संबंधित घटना ऑब्जेक्ट्स की target प्रॉपर्टी नहीं है स्पैन तत्व, लेकिन डीआईवी तत्व स्वयं।

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

मैं कैसे निर्धारित कर सकता हूं कि स्पैन तत्व के अंदर कुंजी-घटना हुई है या नहीं?

Answer 1

यह चयन API का उपयोग करके किया जा सकता है:

$('div').keydown(function(e) { 
    if (document.selection) { 
     alert(document.selection.createRange().parentElement().tagName); // IE 
    } else { 
     // everyone else 
     alert(window.getSelection().anchorNode.parentNode.tagName); 
    } 
}); 

नोट: ऊपर के उदाहरण साधारण है। चयन समस्या के पूर्ण समाधान के लिए नीचे सूचीबद्ध एसओ पोस्ट देखें।

डेमो:

• http://jsfiddle.net/suVdX/

संदर्भ:

• https://developer.mozilla.org/en/DOM/Selection/anchorNode
• How can I get the DOM element which contains the current selection?

Answer 2

पूरे div संपादन योग्य अर्थ है कि <span> टैग टेक्स्ट सामग्री के अलावा कुछ भी नहीं है। यदि आप संपादन योग्य होने के लिए span चाहते हैं, तो स्पैन पर contentEditable सेट करें।