HTML DOM Element contentEditable属性

定義と使用法

contentEditable 属性設定または返り値は要素の内容が編集可能かどうかを示します。

ヒント：要素の内容が編集可能かどうかを確認するためにisContentEditable属性も使用できます。

参照も：

isContentEditable属性

HTML contenteditable 属性

インスタンス

例1

この段落は編集可能です：

<p id="myP" contenteditable="true">編集可能です。</p>

"myP"が編集可能であればtrueを返します：

document.getElementById("myP").contentEditable;

実際に試してみてください

例2

"myP"の内容を編集可能にする：

document.getElementById("myP").contentEditable = "true";

実際に試してみてください

例3

内容編集可能状態の切り替え：

cinst x = document.getElementById("myP");
if (x.contentEditable == "true") {
  x.contentEditable = "false";
  button.innerHTML = "myPを編集可能にします！を有効にします！";
}
  x.contentEditable = "true";
  button.innerHTML = "myPを編集可能にする！を無効にします！";
}

実際に試してみてください

文法

contentEditable属性を返す：

element.contentEditable

contentEditable属性を設定する：

element.contentEditable = value

属性値

値 説明
value
  • "true" - 内容が編集可能
  • "false" - 内容が編集不可
  • "inherit" - デフォルト。親要素が編集可能であれば編集可能

返り値

タイプ 説明
文字列 要素が編集可能であればtrue、そうでなければfalseです。

ブラウザのサポート

element.contentEditable() DOMレベル1（1998）の機能です。

すべてのブラウザが完全にサポートしています：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート 9-11 サポート サポート サポート サポート