Question

我试图意识到我认为很容易的事情。

当用户专注于我的一个可信范围时，如果它包含默认文本，我想清空它。

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

这是我的代码：

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时，它不起作用。它正在清空范围，但如果他没有在第一个字母之前或最后一个字母之后点击，他就不会写任何东西。

这里是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()（vs html()），如果 <br/>紧随span。

e.g。只有这个例子中的前三个条目才有效！：

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

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

我猜测同一行上的<br/>在清空时扩展了<span>元素的范围，这允许点击传播到范围。 html()只是在幕后设置innerHTML，因此行为略有不同。点击要删除的元素的行为是一个真正的灰色区域。

我使用各种选项创建了这个JSFiddle，以查看发生了什么。移除的8px最小宽度 没有任何选项可用：

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

Answer 2

尝试在代码中的任何地方使用.text（）代替.html（）

在焦点的空的contenteditable跨度

2 个答案:

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

有点可疑：