web-dev-qa-db-ja.com

テキストフィールドのように機能するDIVの「プレースホルダー」を作成する方法

Divにプレースホルダー属性がありません

<div id="editable" contentEditable="true"></div>

が欲しいです <Please your enter your Name>ユーザーがDIV内のテキスト全体をバックスペースする場合、または内部にテキストがない場合にDIVで表示するには、どうすればよいですか？

htmlplaceholder
22
user2399158

これは純粋な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以前ではサポートされていません。

61
mrmoje

あなたはこれを試すことができます！

html：

<div contentEditable=true data-text="Enter name here"></div>

css：

[contentEditable=true]:empty:not(:focus):before{
content:attr(data-text) }

チェックアウト（デモ）

6
MD Furkanul Islam