SYNCER

SYNCER

contenteditable属性 - 内容の編集

公開日:

contenteditable属性は、要素の内容を編集することを許可するか否か、設定するための属性です。

説明

contenteditable属性は、要素の内容を編集可能にするための属性です。列挙属性で、値は次の2つのキーワードから指定して下さい。

true
編集を有効にする。
false
編集を無効にする。
inherit
親要素を継承する。初期値であり、欠損値。
値の指定なし
trueと同じ扱い。

HTML

<!-- 編集できる -->
<p contenteditable="true">テキスト</p>
<p contenteditable>テキスト</p>

<!-- 編集できない -->
<p contenteditable="false">テキスト</p>

contenteditable属性は、子孫に引き継がれます。下記の場合、div要素の子要素であるp要素も編集が可能になります。

HTML

<div contenteditable>
	<p>編集できる</p>
	<p>編集できる</p>
	<p>編集できる</p>
</div>

p要素を編集できなくするには、別途、falseを指定する必要があります。下記の場合、2つ目のp要素の内容は編集できませんが、div要素の編集権限でこのp要素自体を削除することはできます。

HTML

<div contenteditable>
	<p>編集できる</p>
	<p contenteditable="false">編集できない (要素ごと削除はできる)</p>
	<p>編集できる</p>
</div>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】contenteditable属性 - 内容の編集</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/contenteditable/">
		<style>
			body {
				background-color: #fff ;
			}

			div[contenteditable] {
				margin-top: 24px ;
				padding: 12px ;
				background-color: #fee ;
			}
		</style>
	</head>
	<body>

<p>contenteditable属性は、要素の編集を可能にする属性です。</p>

<div contenteditable>
	<p>このテキストは編集できます。</p>
	<p contenteditable="false">このテキストは編集できません。が、要素ごと削除はできます。</p>
	<p>このテキストは編集できます。</p>
</div>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>