contenteditable属性
contenteditable属性は、要素の内容を編集可能かどうかを指定するグローバル属性。
例えば、p要素のcontenteditable属性にtrue
を指定すると、そのp要素内のテキストを編集できるようになる。
ブラウザ対応 |
---|
構文
<element contenteditable="true|false">
- true
- 要素の内容を編集可能にする。
- false
- 要素の内容を編集可能にしない。
要点
- 要素の内容を編集可能かどうかを、真偽値(
true
かfalse
)で指定する。 - contenteditable属性を設定しない場合は、親要素の設定を継承する。
- 全てのHTML要素で使用できるグローバル属性である。
- HTML5にて新たに導入された属性である。
サンプルコード
編集可能にする
<p contenteditable="true">テキスト</p>
編集可能にしない
<p contenteditable="false">テキスト</p>
サンプル
HTMLソースコード
<p contenteditable="true">編集<b>可能</b>テキスト</p> <p contenteditable="false">編集<b>不能</b>テキスト</p>
実際の表示
編集可能テキスト
編集不能テキスト
サンプルの動作について
「編集可能テキスト」のテキストを左クリックするなどしてフォーカスを当てると、文字入力用のカーソルが現れ、テキストを編集できる。改行もできる。