javascript - 清除默认文本点击时的标签

Question

有了这个小提琴：http: //jsfiddle.net/2mw4c/12/

我希望能够从<p>标签中清除文本，然后开始输入。我遇到的问题是，当您单击时，<p>标签被清除，我无法输入。

JavaScript：

$("p").on("mousedown", function(e){
    if($(this).text() === "Click"){
        $(this).text("").focus();
    }
});

HTML：

<div class="content" contenteditable="true"><p>Click</p></div>

我需要做什么才能开始在标签中写入？

Answer 1

我不确切知道您要实现什么，但是当我将其contenteditable移至p元素时它对我有用。

我从您的评论中得到的印象是您希望在标记中保留当前结构。div由于p是空的，它似乎正在崩溃。我已经更新了我的小提琴链接。

http://jsfiddle.net/nyaray/2UJRS/2/

Answer 2

您可以设置最小高度和宽度。您需要指定大小，否则 p-tag 内将没有可点击区域，因为 in 是一个内联元素。

http://jsfiddle.net/MrPolywhirl/WZg6H/

div.content>p {
    min-width: 1em;
    min-height: 1em;
    background: #EEF;
}

Answer 3

小提琴演示

$("p").on("mousedown", function (e) {
    var that = $(this);
    var txt = that.text();
    if (txt === "Click") {
        height = that.css('height');
        that.css('height', height).text("").focus();
    } else if ((txt).length) {
        that.css('height', 'inherit');
    } else if (txt.length === 0) {
        that.css('height', height);
    }
});

Answer 4

我认为<p>您尝试的标签是用作输入，所以请检查以下更改：

试试这个：

http://jsfiddle.net/2mw4c/22/