Contenteditable и jQuery: избегать div

Question

Когда пользователь нажимает кнопку ввода в div, содержащем contentEditable, он генерирует div. Как я могу избежать этого и создать p или/и br? (Пожалуйста, только JQuery)

здесь, чтобы играть и проверить: http://jsfiddle.net/r4gaftj2/

JQuery:

$('#input').keypress(function(e) { 
     if(e.which == 13) { // if press enter 
      // alert('You pressed enter!'); //it works 

      // it does not work: 
      // e.preventDefault(); 
      // $('#input').append("<br>"); 
      // $(this).html('<br><br>'); 
     } 
}); 

HTML:

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

Answer 1

Немного сложнее, но работает.

Родной объект иногда не имеет реализации toString и возвращает нуль. Вот почему у вас нет ничего в тревоге. Вместо предупреждения используйте console.info.

$('#input').keypress(function(e) { 
    if(e.which == 13) { 
     // Get current cursor position 
     // This is section object 
     var s = window.getSelection(); 
     // Get range object, this object gives you 
     // possibility to add new elements after cursor position. 
     var range = s.getRangeAt(0); 
     e.preventDefault(); 
     // creating initial br 
     var last = document.createElement('br'); 
     // Initial br 
     range.insertNode(last); 
     // Parent container (editable node) 
     var container = s.focusNode; 
     // If cursor is inside text container will be text node, need to pull up. 
     if (container.nodeType != HTMLElement.ELEMENT_NODE) 
      container = container.parentNode; 
     if (last == container.children.item(container.children.length-1) && last.previousSibling && last.previousSibling.nodeType == HTMLElement.ELEMENT_NODE) { 
      // After BR was other element node so it\s safety to add only one BR. 
     } else if (!last.previousSibling || last.previousSibling.nodeType == HTMLElement.TEXT_NODE || (last.nextElementSibling && last.nextElementSibling.tagName != 'BR')) { 
      // If first node: to see new line need br and something and this can't be text node... 
      // If next isn't BR need to create second to see new line (see above) 
      last = document.createElement('br'); 
      range.insertNode(last); 
     } 
     // Cleanup cursor 
     s.removeAllRanges(); 
     // move cursor after last added node 
     range.setStartAfter(last); 
     range.setEndAfter(last); 
     // set new cursor position 
     s.addRange(range); 
    } 
});