javascript - 空的 contenteditable 跨度在焦点上

Question

我正在努力实现我认为很容易的事情。

当用户关注我的一个 contenteditable span 时，如果它包含默认文本，我想清空它。

当他失去焦点时，如果他没有写任何东西，我想恢复默认文本。

这是我的代码:

content.focus(function() {
    if ($(this).html() === "Text"){
        $(this).html(""); //not working
        //$(this).empty(); //not working
    }
    console.log($(this)[0]);
});
content.blur(function() {
    if ($(this).html() === ""){
        $(this).html("Text");
    }
});

当通过按 Tab 获得焦点时效果很好。

然而，当用户点击 div 时，它不起作用。它正在清空 span，但如果他在第一个字母之前或最后一个字母之后没有点击，他就不能写任何东西。

这是一个 demo .

Answer 1

实际的解决方案是增加跨度的最小宽度，以允许清空的跨度在处理模糊事件时仍然接收正在处理的点击事件，例如

.simpletext {
    outline: none;
    min-width: 30px;
    display: inline-block;
}

示例:http://jsfiddle.net/TrueBlueAussie/10r2gasq/13/

如果您希望根据内容计算最小宽度，请改为执行以下操作:

http://jsfiddle.net/TrueBlueAussie/10r2gasq/14/

var content = $(".simpletext");

content.focus(function() {
    var $this = $(this);
    if ($this.html() === "Text"){
        // Set the min size to the current size before removing the text
        $this.css('min-width', $this.innerWidth());
        $this.html("");
    }
    console.log($(this)[0]);
});
content.blur(function() {
    var $this = $(this);
    if ($this.html() === ""){
        // Set the min size back to its value in the CSS
        $this.css('min-width', '');
        $this.html("Text");
    }
});

注意:使用 text()仍然优于 html()但这本身并不是一个可靠的解决方案。

---

有点可疑:

另一个答案，使用text()而不是 html()实际上有点转移注意力...

它只对 text() 有不同的作用(与 html() 相比)，如果 <br/>紧接着 span .

例如此示例中只有前三个条目有效!:

http://jsfiddle.net/TrueBlueAussie/10r2gasq/9

基本上使用text()如果 <br/> 也会失败s 在跨度之后的不同行上，或者如果未指定最小宽度。

我猜 <br/>在同一行上扩展了 <span> 的范围元素清空时允许点击传播到跨度。 html()只是在幕后设置 innerHTML，所以行为略有不同。点击被移除元素的行为是一个真正的灰色地带。

我创建了这个带有各种选项的 JSFiddle 以查看发生了什么。随着 8px min-width of span removed 所有选项都不起作用:

http://jsfiddle.net/TrueBlueAussie/10r2gasq/15/