Javascript 焦点上为空

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

当用户关注我的某个内容时，如果其中包含默认文本，我希望将其清空

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

这是我的密码：

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时，它不起作用。这会清空跨度，但如果他在第一个字母之前或最后一个字母之后没有单击，他将无法写入任何内容

---

这里有一个。

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

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

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

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

例子： 如果希望根据内容计算最小宽度，请执行以下操作：

注意：使用

text（）

仍然比

html（）

更可取，但这本身并不是一个可靠的解决方案。

---

有点可疑： 另一个答案是使用

text（）

而不是

html（）

实际上有点像是在转移注意力

如果

紧跟在

span

之后，则它仅对

text（）

（vs

html（）

）起作用

e、 g.本例中只有前三个条目有效！：

如果

位于跨距后的不同行上，或者如果未指定最小宽度，则基本上使用

text（）

也将失败

我猜想，当

元素被清空时，同一行上的

扩展了该元素的范围，从而允许单击传播到范围

html（）

只是在幕后设置innerHTML，因此给出了稍微不同的行为。正在删除的单击元素的行为是一个真正的灰色区域

我用各种选项创建了这个JSFIDLE，以查看发生了什么。移除8px最小跨距宽度后，所有选项均无效：

---

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

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

例子： 如果希望根据内容计算最小宽度，请执行以下操作：

注意：使用

text（）

仍然比

html（）

更可取，但这本身并不是一个可靠的解决方案。

---

有点可疑： 另一个答案是使用

text（）

而不是

html（）

实际上有点像是在转移注意力

如果

紧跟在

span

之后，则它仅对

text（）

（vs

html（）

）起作用

e、 g.本例中只有前三个条目有效！：

如果

位于跨距后的不同行上，或者如果未指定最小宽度，则基本上使用

text（）

也将失败

我猜想，当

元素被清空时，同一行上的

扩展了该元素的范围，从而允许单击传播到范围

html（）

只是在幕后设置innerHTML，因此给出了稍微不同的行为。正在删除的单击元素的行为是一个真正的灰色区域

我用各种选项创建了这个JSFIDLE，以查看发生了什么。移除8px最小跨距宽度后，所有选项均无效：

---

---

谢谢，它确实解决了问题：）但我不明白有什么区别+1：但我也不明白这为什么会改变行为。你能详细说明它引起的差异吗？@ TreeBLeaAusie:我也是：）TueLeBuaLaSioue在我的浏览器（Chrome 36下Ubuntu）和.HTML*（）中，点击后，如果它在“文本”的中间，我就不能写了；我不得不重新选择一次。使用.text（）时，它会立即工作。不知道为什么行为会变得很难。谢谢，它确实解决了问题：）但我不明白区别是什么+1：但我也不明白这为什么会改变行为。你能详细说明它引起的差异吗？@ TreeBLeaAusie:我也是：）TueLeBuaLaSioue在我的浏览器（Chrome 36下Ubuntu）和.HTML*（）中，点击后，如果它在“文本”的中间，我就不能写了；我不得不重新选择一次。使用.text（）时，它会立即工作。不知道为什么行为变得强硬。+1…聪明人。。。！！这是一个完美的答案看到文本工作而html不工作，这完全是震惊。没有解释为什么它会起作用。必须承认为什么这件事很奇怪。用div替换br也可以，顺便说一句，在不需要时使用.text（）不是一个好主意。它要比.html（）慢得多，因为它试图逃避html标记。（事实上，我们也应该使用本机domapi）@Richard：是的，div与同一行中的

s具有类似的效果（但这只是一个如此不可靠的浏览器怪癖）。由于内联块样式，将

span

s转换为

div

s不起作用。如果删除最小宽度，在所有这些情况下它都会停止工作。@Richard：根据jQuery源代码，

html（）

当然也比

text（）

快得多。马匹的路线。。。坚持使用

html

获取此代码，并修复最小宽度（较大宽度或编程）：+1…聪明人。。。！！这是一个完美的答案看到文本工作而html不工作，这完全是震惊。没有解释为什么它会起作用。必须承认为什么这件事很奇怪。用div替换br也可以，顺便说一句，在不需要时使用.text（）不是一个好主意。它要比.html（）慢得多，因为它试图逃避html标记。（事实上，我们也应该使用