Question

当用户在可编辑内容中点击Enter（键13）时，我想在<p data-attribute="blah">...</p>标记中插入数据属性。当用户点击Enter时我已经收到通知，但我不确定如何在浏览器创建的元素中插入属性作为默认行为。

任何提示？

谢谢！

Answer 1

你可能做的最好的事情是跟踪段落。创建contenteditable元素后，您将获得段落列表。

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

Javascript（使用jQuery，因为你使用了它的标签）：

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;
});

删除的段落将被丢弃 - 您决定如何处理它们。

我使用了input事件，因为它是跟踪内容更改的最可靠事件，包括仅使用鼠标从剪贴板剪切和粘贴。太糟糕了，它在IE8及更低版本上不可用，而在IE9中，当删除内容（！）时，它不会触发，而IIRC甚至不在contenteditable元素上。 Uuuugh。

您可能也想要添加propertychange事件，或者您只能依赖keypress和mouseup事件。

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

1 个答案: