Working with an unordered (or ordered) list in a contenteditable gives me a headache.

Whenever I want to end editing the list by pressing ENTER twice the browser will close the <ul /> but inserts a <p /> (Firefox) or a <div /> (Chrome) tag that contains a <br />.
Example here

My goal is to avoid that superfluous <p /> or <div /> and instead just close the <ul />.
I have tried to modify Tim Down's solution which will prevent the browser to insert <p /> or <div /> when pressing ENTER and instead inserts a clean <br /> tag.
Example here

Unfortunately though, when using that solution the <ul /> is never closed by the browser since only <br /> tags are inserted inside the <li /> item.

So my question is:

How can I actively close the <ul /> by inserting a node or pasting html when pressing enter on the last empty <li />?

Update: In case the question is stll unclear: I am looking for a way to close the <ul /> without inserting <p /> or <div /> tags but just by inserting a good old plain <br /> instead

Working with an unordered (or ordered) list in a contenteditable gives me a headache.

Whenever I want to end editing the list by pressing ENTER twice the browser will close the <ul /> but inserts a <p /> (Firefox) or a <div /> (Chrome) tag that contains a <br />.
Example here

My goal is to avoid that superfluous <p /> or <div /> and instead just close the <ul />.
I have tried to modify Tim Down's solution which will prevent the browser to insert <p /> or <div /> when pressing ENTER and instead inserts a clean <br /> tag.
Example here

Unfortunately though, when using that solution the <ul /> is never closed by the browser since only <br /> tags are inserted inside the <li /> item.

So my question is:

How can I actively close the <ul /> by inserting a node or pasting html when pressing enter on the last empty <li />?

Update: In case the question is stll unclear: I am looking for a way to close the <ul /> without inserting <p /> or <div /> tags but just by inserting a good old plain <br /> instead

• javascript
• jquery
• contenteditable

• 2 what are you expecting? the <ul> IS "closed", by virtue of existing; there's no such thing as an unclosed <ul> in the DOM. when you press Enter twice, you ask to type beyond the <ul>, and that blank line has to live somewhere, so the browser puts it in a <p>. – Eevee Commented Jan 25, 2013 at 23:43
• Might be of some use: stackoverflow./questions/5602241/… – WilHall Commented Jan 27, 2013 at 19:22
• i stumbled across this behaviour as well, but i observed that using FF6 there is no additional p-tag being entered - it happens in more recent FF versions only – Thariama Commented Sep 25, 2013 at 12:31

3 Answers 3

Similar to your attempt, we modify the contenteditable when the user presses Enter: Demo

if (window.getSelection) { // w3c
    $('div').keypress(function (e) {
        var sel, node, children, br, range;
        if (e.which == 13) {
            sel = window.getSelection();
            node = $(sel.anchorNode);
            children = $(sel.anchorNode.childNodes);

            // if nothing is selected and the caret is in an empty <li>
            // (the browser seems to insert a <br> before we get called)
            if (sel.isCollapsed && node.is('li') && (!children.length ||
                    (children.length == 1 && children.first().is('br')))) {
                e.preventDefault();

                // if the empty <li> is in the middle of the list,
                // move the following <li>'s to a new list
                if (!node.is(':last-child')) {
                    node.parent().clone(false)
                        .empty()
                        .insertAfter(node.parent())
                        .append(node.nextAll());
                }

                // insert <br> after list
                br = $('<br>').insertAfter(node.parent());

                // move caret to after <br>
                range = document.createRange();
                range.setStartAfter(br.get(0));
                range.setEndAfter(br.get(0));
                sel.removeAllRanges();
                sel.addRange(range);

                // remove <li>
                node.remove();
            }
        }
    });

} else if (document.selection) { // internet explorer
    $('div').keypress(function (e) {
        var range, node, children;
        if (e.which == 13) {
            range = document.selection.createRange();
            node = $(range.parentElement());
            children = $(range.parentElement().childNodes);

            // if nothing is selected and the caret is in an empty <li>
            // (the browser seems to insert a <br> before we get called)
            if (!range.htmlText.length && node.is('li') && (!children.length ||
                    (children.length == 1 && children.first().is('br')))) {
                e.preventDefault();

                // if the empty <li> is in the middle of the list,
                // move the following <li>'s to a new list
                if (!node.is(':last-child')) {
                    node.parent().clone(false)
                        .empty()
                        .insertAfter(node.parent())
                        .append(node.nextAll());
                }

                // insert <br> after list
                br = $('<br>').insertAfter(node.parent());

                // move caret to after <br>
                range = document.body.createTextRange();
                range.moveToElementText(br.get(0));
                range.collapse(false);
                range.select();

                // remove <li>
                node.remove();
            }
        }
    });
}

Note that this doesn't handle the case where the user has selected something before pressing Enter. If you want to handle this case, you'll need to figure out if the user has selected the entire contents of the <li> (this doesn't seem like a trivial task), and if so, delete the contents and treat it the same as if the user pressed Enter in an empty <li>.

I understand your question but it's not clear why such a requirement would exist. It might help to clarify that aspect.

Regardless, here's one idea. Why not replace or remove the empty <div> and <p> tags.

$(document).ready(function(){
    $("div").keyup(function(evt) { 
        $("div, p").filter( function() {
                $this = $(this);
            return !($.trim($(this).text()).length);
        }).replaceWith('<br />');
    });
});

Working Example: http://jsfiddle/4xyR2/9/

One issue I notice concerns how contenteditable affects the cursor using the above solution. I think Chrome and Firefox require the <div> and <p> so they can track where the cursor exists in the <div>. This es from my observations while testing, not from a deep understanding on how the browser's interpret contenteditable.

Chrome (24.0.1312.52 m) appears to dislike the replace. I see weird cursor placement when I test it, but it works. Firefox (17.0.1) handles the replace nicely.

The best what I was able to workout without Javascript was

HTML:

<div contenteditable="true">
  <div>asdfasdf</div>
</div>

LESS:

div[contenteditable=true] {
  outline: none;

  &>p,
  &>div {
      margin: 0 0 0 30px;
      display: list-item;
  }
}

bin http://jsbin./idekix/6/edit

But there is some drawbacks here,

1. the first and very big, FireFox 18.0.1 on Win8 instead inserting the div or p tags as a new line uses something like double br,

2. the second happened when you remove everything and starting type and hit enter, different browsers behavior very differently, Chrome insert very first line as a just text node of contenteditable container, and than put every new line into div, Opera 12.12 handle it better, and it never allows remove last div node, IE9-10 starting jump around and after you started again uses p tags instead of div (that's not even such a disaster, just inconsistency), but yet the FireFox is not yet even trying to change it's br behavior. Also trying to checkout IE7-8 with IE10 debug mode and it is the same as Opera has, though it is not real browsers.

3. the third that it allows you insert empty nodes, speaking of this the good job done by Opera, see this bin in Opera http://jsbin./uxesez/1/edit, the markup is more close to original here, and it does not allow you insert empty li.

That's said, all tests where done on Windows 8 64bit platform, with Chrome 24.0.1312.56 m, FireFox 18.0.1, Opera 12.12 and IE10 with emulating older IEs by IE debug bar. Admit that on other platforms/versions things could be different.

Summarize all the above, contenteditable has very good browser support range http://caniuse./contenteditable, but yet every browser has own implementation, that's another separate question why. So without crossbrowser JavaScrpt hassle you could not use it around. Also as my personal opinion contenteditable core idea more suitable like lightweight replacement of iframe when it uses as element of almost every rich text editor in browser.

UPD from Mozilla source https://developer.mozilla/en-US/docs/HTML/Content_Editable

In HTML5 any element can be editable. This feature was introduced a long time ago, but has now been standardized by WHATWG (html current spec). With some JavaScript event handlers you can transform your web page into a full and fast rich-text editor.

Next step is just my humble suggestion. Much handy in your case, as my opinion, would be using real editable fields instead. The very much prototype version I did into this bin http://jsbin./ojiyok/7/edit there is still things for improvement but looks like it has more predictable behavior than real conteneditables, and good part here you could change UI according your needs in all browsers at once.