从中清除默认文本 <p> 点击时标记

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元素时，它对我contenteditable 。

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

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

Answer 2

小提琴演示

$("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 3

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

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

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

Answer 4

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

尝试以下方法：

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