Question

我希望能够清除<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

Fiddle DEMO

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

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

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

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

Answer 4

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

请改为尝试：

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

单击</p>时清除<p>标记中的默认文本

4 个答案: