javascript - 如何跨浏览器确定 contenteditable 元素内的节点是否为空？

Question

无需求助于库，我想知道是否(而不是何时)下面的 contenteditable 元素的内容已被删除。

<span contenteditable id=foo>tell me when this string is deleted</span>

Answer 1

不幸的是，我运行 Linux，所以无法测试 IE，但它可以在 Chrome 和 Firefox 中使用

document.getElementById("foo").onkeyup = function (event) {
    // Firefox doesn't like innerText
    var content = this.innerText || this.innerHTML;

    // this replace strips whitespace (can be removed if needed)
    if (content.replace(/\s/g, "").length === 0) {
        this.blur(); // when using an alert, the onkeyup event will fire again if you hit enter...
                     // this removes the focus beforehand
                     // (can be removed if you are not using an alert box or something similar)

        alert("content deleted");
    }
};