ywork2020.com

Title

コンテンツエディタブル属性を使えば、要素の編集可否を設定変えることが出来る

contenteditable属性の概要

普通はWebページに書かれている内容は編集できません。ですが、要素でこのプロパティをtrueに設定すると編集可能になります。

実機サンプル

#2のテキストは編集可能に設定しています。クリックして文字を打ち込んでみて下さい。
テキストエリアみたいに編集できてスクリプトで値まで取得することが出来ます。

#1:Bタグを使用しています。編集 不可能なテキストです。
#2:Bタグを使用しています。編集 可能なテキストです。

contenteditable属性の補足

スクリプトの説明ページではないので、その部分のサンプルコードは省略しています。

サンプルコード

<body>
	<b contenteditable="false">#1:Bタグを使用しています。編集 不可能なテキストです。</b><br>
	<b contenteditable="true">#2:Bタグを使用しています。編集 可能なテキストです。</b><br>
</body>
関連のあるページ
参考になるサイト