2020年03月29日(日)

contenteditableな要素にplaceholderを与える

• 0
• 1
• 1
• 4

Result

See the Pen Placeholder support for contentEditable elements, without JavaScript by kachibito
(@kachibito) on CodePen.

タイトルの通り、contenteditableで編集可能な要素にplaceholderを与える、というもの

結果から言うと:emptyを使って何も入力されてない状態の時に:beforeで任意のテキストを挿入します

挿入するテキストはcontent: attr()で挿入します

Ads

css

[contenteditable=true]:empty:before{ content: attr(placeholder); pointer-events: none; display: block; /* For Firefox */ } div[contenteditable=true] { border: 1px dashed #AAA; width: 290px; padding: 15px; } <...