値がない場合、pタグ内にデフォルトのテキストを表示

Question

コンテンツ編集可能な<p>とタイプsubmitの入力があります。したがって、<p>の中に値がない場合は、デフォルトのテキスト（たとえば、「コメントを追加...」）を表示したいと思います。 contenteditableにフォーカスがある場合は、デフォルトのテキストを削除します。今度は、contenteditableにフォーカスがなく、ユーザーが何らかのテキストを入力した場合は、ユーザーが入力したテキストを残してください。ただし、contenteditableにフォーカスがない場合、値が設定されていないとデフォルトのテキストが表示されます。どのように私はCSSまたはJavaScript（jqueryなし）でこれを行うことができますか？ :empty擬似クラスと擬似要素とおそらく

#add_comment { 
 
    width: 100%; 
 
    max-width: 720px; 
 
    margin: 1px auto; 
 
    background: white; 
 
} 
 

 
#divLeft { 
 
    vertical-align: top; 
 
    display:table-cell; 
 
    width: 100%; 
 
} 
 

 
#add_comment #comment { 
 
    display: block; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    outline: 1px solid lightgrey; 
 
} 
 

 
#divRight { 
 
    display:table-cell; 
 
    width: 120px; 
 
    vertical-align: top; 
 
} 
 

 
#divRight #submit { 
 
    background: #2ec76e; 
 
    border: none; 
 
    color: white; 
 
    padding: 10px; 
 
    margin-top: 10px; 
 
    margin-right: 10px; 
 
    border-radius: 3px; 
 
    cursor: pointer; 
 
}

<div id="add_comment"> 
 
    <div id="divLeft"> 
 
    <p id="comment" contenteditable="true"></p> 
 
    </div> 
 
    <div id="divRight"> 
 
    <input type="submit" value="Comment" id="submit" /> 
 
    </div> 
 

 
</div>

Answer 1

？

#add_comment { 
 
    width: 100%; 
 
    max-width: 720px; 
 
    margin: 1px auto; 
 
    background: white; 
 
} 
 
#divLeft { 
 
    vertical-align: top; 
 
    display: table-cell; 
 
    width: 100%; 
 
} 
 
#add_comment #comment { 
 
    display: block; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    outline: 1px solid lightgrey; 
 
} 
 
#divRight { 
 
    display: table-cell; 
 
    width: 120px; 
 
    vertical-align: top; 
 
} 
 
#divRight #submit { 
 
    background: #2ec76e; 
 
    border: none; 
 
    color: white; 
 
    padding: 10px; 
 
    margin-top: 10px; 
 
    margin-right: 10px; 
 
    border-radius: 3px; 
 
    cursor: pointer; 
 
} 
 
p:empty:before { 
 
    content: 'Add Comment'; 
 
    color: grey 
 
} 
 
p:focus::before { 
 
    content: ''; 
 
}

<div id="add_comment"> 
 
    <div id="divLeft"> 
 
    <p id="comment" contenteditable="true"></p> 
 
    </div> 
 
    <div id="divRight"> 
 
    <input type="submit" value="Comment" id="submit" /> 
 
    </div> 
 
</div>

Answer 2

ただ、このようにpタグ内のコントロールを配置：

<p> <asp:Label ID="Label1" runat="server" Text=""></asp:Label></p>

たり、HTML inputタグを使用することができます。 jQueryを使って

Answer 3

https://jsfiddle.net/moongod101/jcma31L8/

$(function(){ 

$dfText = 'How was your day hum?' 
$p = $('p'); 

$p.text($dfText); 

$('input').on('input',function(){ 
    $text = $(this).val(); 
    if($text == ''){ 
    $p.text($dfText) 
    }else{ 
    $p.text($text) 
    } 

}); 


}); 

Answer 4

あなたはあなたが試すことができ、この

jQueryの

var placeHolder = 'Add Comment'; 

$("#comment").text(placeHolder); 

$("#comment").bind("focusin blur", function() { 
    if ($(this).text() === placeHolder) { 
    $(this).text(''); 
    } else if($(this).text() === ''){ 
    $("#comment").text(placeHolder); 
    } 
}); 

Answer 5

、

p:empty:not(:focus)::before 
{ 
    content: attr(data-placeholder); 
} 

<p data-placeholder="Insert text here..." contenteditable></p>