Element.isContentEditable - 要素が編集可能かを取得する

投稿日:2016/03/03 / 更新日:2016/03/03

JavaScriptの、ElementオブジェクトのisContentEditableは要素が編集可能か否かを確認するプロパティです。

説明

ElementオブジェクトのisContentEditableプロパティは、その要素がユーザーによって編集可能か否かの情報を含みます。編集可能な場合はtrue、不可能な場合はfalseを返します。

<p contenteditable="true">編集可能なテキストです。</p>

isContentEditableプロパティは、要素のcontenteditable属性の値を反映しているわけではありません。どういうことかというと、例えば、document.designMode = "on"を実行したり、対象要素の親要素のcontenteditable属性がtrueであることを継承している場合など、対象の要素自身にcontenteditable属性がなくても編集可能になるケースがある、ということです。

そしてisContentEditableプロパティは、要素のcontenteditable属性に関わらず、あくまでもその要素が編集可能か否かを教えてくれます。

編集可能な要素はマウスやタッチでフォーカスすると、テキストフォームみたいにテキストを編集したり、また、中身の子要素を削除できます。

サンプルコード

<p id="target" contenteditable="true">編集可能なテキストです。</p>

// p要素を取得
var pElement = document.getElementById( "target" ) ;

// p要素が編集可能か否かを取得 ( → true )
var isContentEditable = pElement.isContentEditable ;

デモ

要素が編集可能か否か、isContentEditableプロパティを取得して表示します。結論から言うと編集可能です。フォーカスをあてると編集できるので確認してみて下さい。

RUN
HTML
CSS
JavaScript

<p id="target" contenteditable="true">編集可能なテキストです。</p> <p><code><p contenteditable="true">編集可能なテキストです。</p></code></p> <p id="output" class="output"></p> <p id="error" class="error none"></p> <p><button id="fire" class="button">取得</button></p> <p><button id="reset" class="button">リセット</button></p>

.output { color: #333 ; text-align: center ; padding: 8px 0 ; border: 1px solid #333 ; min-height: 24px ; } #target { font-size: 16px ; } .error { color: #f00 ; padding: 8px 12px ; border: 1px solid #333 ; min-height: 24px ; } .button { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-size: 1rem ; font-weight: 700 ; border: 1px solid #e6e6e6 ; width: 100% ; box-sizing: border-box ; } .button:hover { cursor: pointer ; background: #e6e6e6 ; } .none { display: none ; } html{ font:400 14px / 1.618 ArialMT,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","ＭＳＰゴシック","Osaka" ; }

// 取得 document.getElementById( "fire" ).addEventListener( "click", function() { try { // 要素を取得 var pElement = document.getElementById( "target" ) ; // p要素が編集可能か否かを取得 var isContentEditable = pElement.isContentEditable ; // 取得した結果を出力 document.getElementById( "output" ).textContent = isContentEditable ; // コンソールで内容を出力 console.log( isContentEditable ) ; // エラーを非表示 errorElement.className = "error none" ; // エラー表示 } catch ( msg ) { errorElement.className = "error" ; errorElement.textContent = msg ; console.error( msg ) ; } } ) ; // リセット document.getElementById( "reset" ).addEventListener( "click", function() { initialize() ; } ) ; // エラー表示用の要素 var errorElement = document.getElementById( "error" ) ; // 初期化 function initialize() { errorElement.className = "error none" ; document.getElementById( "output" ).textContent = "" ; }

構文

readonly boolean isContentEditable = Element.isContentEditable

返り値

項目	説明
isContentEditable	要素の編集が可能だったら`true`、不可能だったら`false`。

外部リンク

HTML Living Standard - WHATWGによる仕様書。
W3C勧告 - W3Cによる仕様書。

説明

サンプルコード

デモ

構文

返り値

関連項目

外部リンク