एक <br> के बजाय <div></div> दबाकर एक contenteditable

Question

मैं अपने कीबोर्ड ईवेंट हैंडलर में कोड का एक सा लिखा है दर्ज की प्रेस कुंजी के जवाब में एक <br> डालने के लिए पर दर्ज बनाओ केवल तभी काम करता है जब कर्सर दो अक्षरों के बीच होता है, अगर अंत में मुझे दो <br> -Elements की आवश्यकता होती है। क्या मैं पता लगा सकता हूं कि क्या मैं लाइन के अंत में हूं? या एंटर समस्या के लिए कुछ अन्य कामकाजी विचार?

मैं भी सामान्य कुंजी घटना को पकड़ने (wothout ctrl-कुंजी दबाया) और जे एस के साथ एक कुंजीपटल घटना जहां दर्ज करें कुंजी ctrl के साथ एक साथ दबाया जाता है बनाने की कोशिश की। लेकिन इस dosn't काम ...

यह केवल वेबकिट/सफारी में काम करने के लिए है ...

Answer 1

अपनी समस्या को हल करने के लिए, हमेशा अपने contenteditable div के अंतिम तत्व के रूप में एक br तत्व रहते हैं। यह div तत्व इंजेक्शन करने के ब्राउज़र डिफ़ॉल्ट के रूप में एक ब्र तत्व तत्व इंजेक्शन करते समय अनुमानित व्यवहार सुनिश्चित करेगा। यह सुनिश्चित करने के लिए कि यह एक बीआर तत्व है, आप अंतिम चाइल्ड कुंजीपटल और माउसअप पर देख सकते हैं।

<div id="editable" contenteditable="true"></div> 

आप निम्न JavaScript (w/jQuery 1.4 +) का उपयोग कर सकते पिछले तत्व के रूप में एक br तत्व रखने के लिए और div div के बजाय एक br तत्व इंजेक्षन करने के लिए:

$(function(){ 

    $("#editable") 

    // make sure br is always the lastChild of contenteditable 
    .live("keyup mouseup", function(){ 
     if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") { 
     this.appendChild(document.createChild("br")); 
     } 
    }) 

    // use br instead of div div 
    .live("keypress", function(e){ 
     if (e.which == 13) { 
     if (window.getSelection) { 
      var selection = window.getSelection(), 
       range = selection.getRangeAt(0), 
       br = document.createElement("br"); 
      range.deleteContents(); 
      range.insertNode(br); 
      range.setStartAfter(br); 
      range.setEndAfter(br); 
      range.collapse(false); 
      selection.removeAllRanges(); 
      selection.addRange(range); 
      return false; 
     } 
     } 
    }); 

}); 

मान लिया जाये कि आप की तरह एक दस्तावेज़ है

ऐप्पल ओएस एक्स डब्ल्यू/Google क्रोम 7, मोज़िला फ़ायरफ़ॉक्स 3.6, ऐप्पल सफारी 5 पर परीक्षण किया गया)। विंडोज इंटरनेट एक्सप्लोरर में काम करने के लिए ierange का उपयोग करने का प्रयास करें।

Answer 2

मैं regEx का उपयोग कर
को हटाने और बदलने के लिए कुंजीपटल ईवेंट में एक फ़ंक्शन बाध्य करूंगा। तो अगर यह अजीब मार्कअप बनाता है, तो यह तय किया जाएगा।

jQuery का उपयोग करना:

$('.myEditable').keyup(function(){ 
    var sanitazed = $(this).text().replace(/<div[^<]*?>/g, '').replace(/<\/div[^<]*?>/g, '<br>'); 
    $(this).text(sanitazed); 
});