Divにプレースホルダー属性がありません
<div id="editable" contentEditable="true"></div>
が欲しいです <Please your enter your Name>
ユーザーがDIV内のテキスト全体をバックスペースする場合、または内部にテキストがない場合にDIVで表示するには、どうすればよいですか?
これは純粋なCSSのみのソリューションです:-
<div contentEditable=true data-ph="My Placeholder String"></div>
<style>
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-ph)
}
</style>
ここでは、基本的に空でぼやけているすべてのcontentEditable
<divs>
を選択します。次に、CSS選択(編集可能なdiv)の前に疑似要素を作成し、コンテンツとしてプレースホルダーテキスト(data-ph
属性を指定)を修正します。古い学校のCSS2ブラウザーをターゲットにしている場合は、data-ph
をすべてtitle
に変更します
修正....... :empty
セレクタは、IEバージョン8以前ではサポートされていません。
あなたはこれを試すことができます!
html:
<div contentEditable=true data-text="Enter name here"></div>
css:
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-text) }