override inner html created by contentEditable

Question

im writing a Soulver-like application with html+js. I need to customize text from input(highlight). For input im using <div contenteditable="true"></div> After each enter in the div appears new div. How can i assign to it id. Or override all internals div with \n, like in textarea. Any ideas?

Answer 1

After each keyup you could loop through the divs and add attr to them:

        $('#your-editable-div').live('keyup', function() {
            $(this).children('div').each(function(index) {
                $(this).attr('id', 'element-'+index);
            });
        });

Answer 2

One thing to note it is contentEditable not contenteditable. IE7 breaks because of this.

Are you testing in Firefox on Mac? Chrome and Safari do not have the same issue.

You can detect the Enter key and then stop the default action. Then you can insert whatever you want, instead of the browser specific stuff.

using jQuery (untested)

//prevent users from typing on datepickers
 $("body").delegate('[contentEditable="true"]', "keypress", function(event)
 {
    //detect and override enter key press
    if(event.which==8)
    {
        event.preventDefault(); /* stop default */
        /* More code to insert something at the mouse location */
    }
 });

See this question for how to insert at the cursor position
Contenteditable text editor and cursor position