Your Search Results

    Content Editable

    イントロダクション

    HTML5 では、全ての要素を編集可能状態 (editable) にする事が出来ます。これはずっと以前から独自実装として存在したものですが、現在は WHATWG によって標準化されています。JavaScript の幾つかのイベントハンドラと併用する事で、ウェブページを多機能で且つ高速に動作するリッチテキスト・エディターにしてしまう事も可能です。

    互換性

    contenteditable 属性は、現行の主要なデスクトップブラウザ全てに実装されています。但しモバイルブラウザに於いては Firefox Mobile などの一部のブラウザにしか実装は無いようです(※最新状況については別途確認して下さい)

    • Firefox 3.5+
    • Chrome 6.0+
    • Internet Explorer 6.0+
    • Safari 3.2+
    • Opera 8+
    • iOS Safari 5.0+
    • Android Browser 3.0+

    どのような挙動を示すか

    HTML ルート要素(<html>)の contenteditable 属性を true にすると、その子孫となる他の全ての要素の内容が編集可能となります。

    以下に簡単な記述例を示します。

    <!DOCTYPE html>
    <html>
    <body>
      <div contenteditable="true">
        このテキストは閲覧者が編集する事が出来ます。
      </div>
    </body>
    </html>

    JavaScript による、ローカルストレージ併用の実装例については http://html5demos.com/contenteditable で確認する事が出来ます。ソースコードを参照してみて下さい。

    関連情報

    Document Tags and Contributors

    Contributors to this page: ethertank
    最終更新者: ethertank,