HTML DOMのisContentEditableプロパティとは？構文・戻り値・実装例を解説
HTML DOMのisContentEditableプロパティは、要素のコンテンツが編集可能かどうかを判定し、その結果を真偽値（boolean）として返します。このプロパティは、HTMLのcontenteditable属性の状態を反映しており、動的に要素の編集可否を確認したい場合に役立ちます。
構文
構文は以下のとおりです。真偽値（true / false）を返します。
HTMLElementObject.isContentEditable
戻り値（真偽値）
このプロパティは、以下のbooleanValueを返します。
| booleanValue | 説明 |
|---|---|
| true | HTMLElementObjectのコンテンツが編集可能であることを示します。 |
| false | HTMLElementObjectのコンテンツが編集不可であることを示します。 |
サンプルコード
isContentEditableプロパティの使用例を見てみましょう。この例では、フォームの送信ボタンをクリックすると、isContentEditableプロパティの値を利用して入力フィールドを無効化（disabled）しています。
<!DOCTYPE html>
<html>
<head>
<title>isContentEditable</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>isContentEditable</legend>
<label for="textSelect">Full Name:
<input type="text" id="textSelect" contentEditable="true" placeholder="John Doe">
</label><br>
<label for="emailSelect">Email:
<input type="email" id="emailSelect" placeholder="John@example.com">
</label>
<input type="button" onclick="confirmtext()" value="Submit">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputText = document.getElementById("textSelect");
var inputEmail = document.getElementById("emailSelect");
divDisplay.textContent = 'NOTE: Email will be not editable once submitted';
function confirmtext() {
inputEmail.disabled = !inputEmail.isContentEditable;
inputText.disabled = !inputText.isContentEditable;
divDisplay.textContent = 'Details Submitted';
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、以下のような出力が得られます。
「Submit」ボタンをクリックする前：
「Submit」ボタンをクリックした後：
まとめ
isContentEditableプロパティを使うことで、JavaScriptから要素が編集可能な状態かどうかを簡単に判定できます。フォームの入力制御や、ユーザーの操作に応じたUIの切り替えなど、インタラクティブなWebページの実装にぜひ活用してください。
-
【初心者向け】HTML DOMのoffsetParentプロパティの使い方とサンプルコード
offsetParentプロパティとは HTML DOM の offsetParent プロパティは、対象要素のオフセット（相対的な位置）がどの親要素を基準として定義されているかを示し、その基準となる親要素への参照を返します。 具体的には、CSS の position プロパティ（relative / absolute / fixed / sticky）が指定された最も近い祖先要素が基準となります。該当する要素が存在しない場合は <body> 要素が返されます。また、テーブルセル内の要素であれば <td> や <table> などのテーブル関連要素が基準にな
-
HTML DOM titleプロパティとは？使い方とサンプルコードを解説
HTML DOM titleプロパティとはHTML DOMのtitleプロパティは、HTML要素のtitle属性に対応する文字列を取得（戻り値として返す）したり、設定したりするためのプロパティです。title属性に値が設定されている場合、その要素にマウスカーソルを重ねると、ツールチップとしてテキストが表示されます。この動的な挙動をJavaScriptから制御できるのが、titleプロパティの役割です。構文title属性の値を取得する場合：ElementOfHTMLObject.titletitle属性に文字列を設定する場合：ElementOfHTMLObject.title = string使