在ContentEditable更改事件的P标签中插入数据属性

Question

I would like to insert a data attribute in the <p data-attribute="blah">...</p> tag when the user hits Enter (key 13) inside a content editable. I have gotten to the point of being notified when the user hits Enter but I am not sure how I can insert the attribute in the element the browser creates as default behaviour.

Any hints?

Thanks!

Answer 1

The best thing you can probably do is keeping track of the paragraphs. Once the contenteditable element has been created, you get a list of the paragraphs.

<div id="textArea" contenteditable></div>

Javascript (with jQuery, since you used its tag):

var textArea = $("#textArea"),
    pars = textArea.find("p");

textArea.on("input", function() {
    var curPars = $("p", this);
    curPars.each(function() {
        if ($.inArray(this, pars) === -1) // this is a new paragraph
            this.setAttribute("data-attribute", someIndex);
    });
    pars = curPars;
});

Deleted paragraphs will be discarded - you decide what to do with them.

I used the input event because it's the most reliable event to keep track of changes on the content, including cutting and pasting from the clipboard using just the mouse. Too bad it's not available on IE8 and lower, and in IE9 it doesn't fire when deleting content (!), and IIRC not even on contenteditable elements. Uuuugh.

You may want to add the propertychange event too, or you can rely on just keypress and mouseup events.