contenteditable … div要素などの中をブラウザ上で編集可能にする属性

Tweet

Category html5 2013/06/06

contenteditable属性は、古くはIE5.5からサポートされたり、Firefox3以降もサポートするようになったりしていた、HTML中の要素を編集可能にする属性。

HTML5にも採用されている。

contenteditable属性で編集可能になった領域では、Enter押下で段落（p要素）になったり、Shift+Enterで改行（br要素）になるなどのお約束があります。

HTML記述例

<button onclick='document.execCommand("bold");'><b>B</b></button>
<button onclick='document.execCommand("italic");'><i>I</i></button>
<button onclick='document.execCommand("underline");'><u>U</u></button>
<button onclick="alert(e1.innerHTML)">ソース</button>
<div id="e1" contenteditable></div>