從中清除默認文本 <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/