Edit

Page

Page title:

Page body:

[19] [DFN[[CODE[contenteditable]]]] [[属性]]は、
[[editing host]] を作成するものです。

* 仕様書

[REFS[
- [27] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2017-02-20 18:15:56 +09:00]]) <https://html.spec.whatwg.org/#contenteditable>
]REFS]

* 意味

[33] [CODE[contenteditable]] [[属性]]は、[[要素]]が[[利用者]]によって編集可能かどうかを指定します。

;; [34] ここでいう編集可能というのは、[[WYSIWYG]] 編集モード
([[editing host]]) のことです。
[CODE(HTMLe)@en[input]] [[要素]]や [CODE(HTMLe)@en[textarea]] [[要素]]のような[[フォーム制御子]]とは異なります。

* 属性値

[24] [CODE(HTMLa)@en[contenteditable]] [[内容属性]]は、[[列挙属性]]です。
次の[[状態]]を持ちます。 [SRC[>>27]]

[FIG(table)[

:kwd: [[キーワード]]
:state: [[状態]]
:semantics: [[意味]]

:kwd: [[空文字列]]、[DFN[[CODE[true][contenteditable=true]]]]
:state: [DFN[[[[RUBYB[真][true]]][contenteditable=true]]]]
:semantics:
[[要素]]は編集可能である

:kwd: [DFN[[CODE[false][contenteditable=false]]]]
:state: [DFN[[[[RUBYB[偽][false]]][contenteditable=false]]]]
:semantics:
[[要素]]は編集可能ではない

:kwd: [[欠値既定値]]・[[非妥当値既定値]]
:state: [DFN[[[[RUBYB[継承]@en[inherit]]][contenteditable]]]]
:semantics:
[[要素]]が編集可能かどうかは[[親]]次第

]FIG]

[26] つまり、 [CODE[contenteditable]] と [CODE[contenteditable=true]] は同義で、
編集可能であることを表します。
[CODE[contenteditable=false]] はそうでないことを表します。
[[属性]]が指定されない時は [CODE[contenteditable]] [[属性]]を持つ直近の[[祖先]]と同じです。

[58] [CODE[contenteditable=false]] を使って、全体としては編集可能でも、
[[子孫]]の一部分だけを編集不能とすることができます。

[EG[
[59] 例えば編集可能領域の中に図表ブロックを挿入して、図表内は編集不能とすることができます。
[[利用者]]は図表の周りに好きに文章を書いたり、図表自体を削除したりすることはできますが、
図表内部は変更することができません。

[60] 図表の中の更に一部、グラフのラベル部分のみ [CODE[contenteditable=true]]
に設定するようなこともできます。
]EG]

[42] [[属性値]]は、 [[ASCII大文字・小文字不区別]]です。

* 文脈

[25] [CODE[contenteditable]] [[内容属性]]は、任意の[[HTML要素]]に指定できます。

;; [61] 実際にはほとんど意味のない[[要素]]もあります。
[CODE(HTMLe)@en[br]] [[要素]]や [CODE(HTMLe)@en[textarea]] [[要素]]、
[CODE(HTMLe)@en[head]] [[要素]]、[CODE(HTMLe)@en[script]] [[要素]]などでは効果がありません。

* [CODE(DOMi)@en[ElementContentEditable]] インターフェイス

[28] [CODE(DOMi)@en[ElementContentEditable]] [[インターフェイス]]は、
[CODE(DOMa)@en[contentEditable]] と [CODE(DOMa)@en[isContentEditable]]
の2つの[[IDL属性]]を持ちます。 [SRC[>>27]]

[29] [CODE(DOMi)@en[ElementContentEditable]] [[インターフェイス]]は、
[CODE(IDL xattr)@en[NoInterfaceObject]] です。 [SRC[>>27]]

[32] [CODE(DOMi)@en[ElementContentEditable]] は、
[CODE(DOMi)@en[HTMLElement]] が[[実装]]します。 [SRC[[CITE[HTML Standard]]]]
つまり、 [[HTML要素]]に両[[IDL属性]]が存在します。

[30] [DFN[[CODE(DOMa)@en[contentEditable]]]] [[IDL属性]]は、
[CODE(xattr IDL)@en[CEReactions]] です。 [SRC[>>27]]

[35] [[取得器]]は、次のようにしなければ[MUST[なりません]] [SRC[>>27]]。

[FIG(steps)[
= [36] [[文脈オブジェクト]]の [CODE(HTMLa)@en[contenteditable]] [[内容属性]]が[[真][contenteditable=true]]状態なら、
== [37] [CODE[true][contenteditable=true]] を返します。
= [38] それ以外で、[[文脈オブジェクト]]の [CODE(HTMLa)@en[contenteditable]] [[内容属性]]が[[偽][contenteditable=false]]状態なら、
== [39] [CODE[false][contenteditable=false]] を返します。
= [40] それ以外なら、
== [41] [CODE[inherit][contenteditable]] を返します。
]FIG]

[43] [[設定器]]は、次のようにしなければ[MUST[なりません]] [SRC[>>27]]。

[FIG(steps)[
= [52] [VAR[新しい値]]を、指定された値を [CODE(IDL)@en[DOMString]] と解釈した結果に設定します。
= [44] [VAR[新しい値]]が [[ASCII大文字・小文字不区別]]で [CODE[inherit][contenteditable]]
なら、
== [45] [[文脈オブジェクト]]の [CODE(HTMLa)@en[contenteditable]] [[内容属性]]を[[削除][属性を削除]]します。
= [46] それ以外で、[VAR[新しい値]]が [[ASCII大文字・小文字不区別]]で
[CODE[true][contenteditable=true]] なら、
== [48] [[文脈オブジェクト]]の [CODE(HTMLa)@en[contenteditable]] [[内容属性]]を、
[CODE[true][contenteditable=true]] に[[設定][属性を設定]]します。
= [49] それ以外で、[VAR[新しい値]]が [[ASCII大文字・小文字不区別]]で
[CODE[false][contenteditable=false]] なら、
== [47] [[文脈オブジェクト]]の [CODE(HTMLa)@en[contenteditable]] [[内容属性]]を、
[CODE[false][contenteditable=false]] に[[設定][属性を設定]]します。
= [50] それ以外なら、
== [51] [CODE(DOMe)@en[SyntaxError]] [[例外]]を[[投げ]]ます。
]FIG]

[31] [DFN[[CODE(DOMa)@en[isContentEditable]]]] [[IDL属性]]の[[取得器]]は、
次のようにしなければ[MUST[なりません]]。 [SRC[>>27]]

[FIG(steps)[
= [53] [[文脈オブジェクト]]が [[editing host]] か、
[[文脈オブジェクト]]が [[editable]] なら、
== [54] [[真]]を返します。
= [55] それ以外なら、
== [56] [[偽]]を返します。
]FIG]

* 処理

[57] [[editing host]] 参照。

* 問題

[23] [[editing host]] 参照。

* 歴史

[18] [CITE@ja-JP[Internet Explorer 5.5 を使った 編集可能な Web ページの作成方法]] ([TIME[2007-04-07 13:42:05 +09:00]] 版) <http://www.microsoft.com/japan/msdn/web/html/mshtml/createwp.aspx#createwp_topic3>

[1]
[[Safari]]: 1.3 以上で [CODE(HTMLa)@en[[[contenteditable]]]]
と [CODE(DOMa)@en[[[designMode]]]] に対応。

[2]
[CITE[Web Applications 1.0]] <http://www.whatwg.org/specs/web-apps/current-work/#contenteditable>

[3]
[CITE[CONTENTEDITABLE Attribute | contentEditable Property (defaults, A, ACRONYM, ...) (Internet Explorer - DHTML)]] <http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/contenteditable.asp>

[4]
>>2 によれば標準の値は[CODE(HTML)@en[[[true]]]]と[CODE(HTML)@en[[[false]]]]。
>>3 によれば[[WinIE 5.5]]とそれ以降では更に[CODE(HTML)@en[[[inherit]]]]も実装。
>>3 中の使用例に拠れば [CODE(HTML example)@en[<[VAR[element-type]] contentEditable>]]のように省略形にもできる。

解説サイトの中には[CODE(HTML)@en[contentEditable="yes"]]を紹介しているところもある。根拠不明。

[20]
[CITE@ja-JP[Internet Explorer 5.5 を使った 編集可能な Web ページの作成方法]] ([CODE[2007-04-07 13:42:05 +09:00]] 版) <http://www.microsoft.com/japan/msdn/web/html/mshtml/createwp.aspx#createwp_topic3>

[22]
[CITE@ja[contentEditable のサポート - えむもじら]] ([CODE[2007-07-06 22:13:00 +09:00]] 版) <http://level.s69.xrea.com/mozilla/index.cgi?id=20070705_contentEditable>

[414]
[CITE[contentEditable の不完全な対応 - A blog? with Σαιτω]] ([CODE[2008-02-09 23:15:11 +09:00]] 版) <http://d.hatena.ne.jp/saiton/20080209/1202566454>

[5]
[CITE@en[Re: several messages about contentEditable, text selection, and related subjects from Ian Hickson on 2008-03-09 (public-html@w3.org from March 2008)]] ([[Ian Hickson (ian@hixie.ch)]] 著, 
[CODE[2008-03-09 20:30:01 +09:00]] 版) 
<http://lists.w3.org/Archives/Public/public-html/2008Mar/0037.html>

[415]
[CITE[Web Applications 1.0 ― contentEditable and disabled]] ([CODE[2005-07-21 07:00:00 +09:00]] 版) <http://annevankesteren.nl/projects/whatwg/spec>
([[名無しさん]])

[416]
[CITE[contentEditable - block breaks]] ([TIME[2005-07-21 00:42:03 +09:00]] 版) <http://web.archive.org/web/20060305151716/jorgenhorstink.nl/projects/whatwg/blockbreak.htm>
([[名無しさん]])

[417] [CITE[IRC logs: freenode / #whatwg / 20100813]]
([TIME[2010-08-15 22:18:12 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20100813#l-567>

[418] [CITE[''''''[''''''whatwg'''''']'''''' '''['''editing''']''' Proposal: Undeletable elements within contentEditable]]
( ([TIME[2011-07-28 08:37:23 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-July/032649.html>

[419] [CITE@en[Web Applications 1.0 r6528 Remove Editing APIs and related sections in favour of http://aryeh.name/spec/editing/editing.html]]
( ([TIME[2011-08-26 09:43:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=6527&to=6528>

[420] [CITE[Google Documentの入力欄を僕達はまだ知らない。 - Google Docs]]
( ([TIME[2011-12-31 16:21:58 +09:00]] 版))
<https://docs.google.com/document/d/1RRBJqK9TPGFA5pQPnafDTa0VWKq6Wh9DNiKjsLaZ63U/edit?pli=1>

[421] [CITE[IRC logs: freenode / #whatwg / 20120112]]
( ([TIME[2012-01-14 20:12:20 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20120112>

[422] [CITE[''''''[''''''whatwg'''''']'''''' Should editable elements have placeholder attribute?]]
( ([TIME[2012-08-30 01:12:43 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-August/037044.html>

[423] [CITE@en[Bug 14554 – Consider adding support for contenteditable=plaintext]]
( ([TIME[2012-10-18 09:02:30 +09:00]] 版))
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=14554>

[424] [CITE[''''''[''''''whatwg'''''']'''''' Submitting contentEditable Content In A Form]]
( ([TIME[2012-10-21 08:55:34 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-October/037680.html>

[425] [CITE[''''''[''''''whatwg'''''']'''''' Submitting contentEditable Content In A Form]]
( ([TIME[2012-12-20 04:51:06 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-December/038426.html>

[426] [CITE@en[First Draft of HTML Editing APIs published by HTML Editing APIs Community Group ''''''[''''''via HTML Editing APIs'''''']'''''']]
( ([[Search Team]] 著, [TIME[2012-04-25 18:43:43 +09:00]] 版))
<http://lists.w3.org/Archives/Public/public-editing/2012Apr/0000.html>

[427] [CITE@en[''''''[''''''editing'''''']'''''' nested contenteditable]]
( ([[Johannes Wilm]] 著, [TIME[2013-05-28 22:36:22 +09:00]] 版))
<http://lists.w3.org/Archives/Public/public-webapps/2013AprJun/0790.html>

[428] [CITE[IRC logs: freenode / #whatwg / 20130607]]
( ([TIME[2013-06-09 21:59:13 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20130607#l-689>

[429] [CITE[IRC logs: freenode / #whatwg / 20130703]]
( ([TIME[2013-07-05 21:10:54 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20130703>

[430] [CITE[IRC logs: freenode / #whatwg / 20130704]]
( ([TIME[2013-07-06 12:47:07 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20130704#l-436>

[431] [CITE[HTML Editing APIs]]
( ([TIME[2014-01-02 12:21:22 +09:00]] 版))
<https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html>

[432] [CITE@ja-JP[Internet Explorer 11 で contenteditable 属性や maxlength 属性を設定した要素で日本語入力ができないことがある]]
( ([TIME[2014-01-29 01:24:43 +09:00]] 版))
<http://support.microsoft.com/kb/2922126/ja>

[433] [CITE@en[''''''[''''''Editing'''''']'''''' Splitting Selection API Into a Separate Specification]]
( ([[Ryosuke Niwa]] 著, [TIME[2014-03-14 08:43:38 +09:00]] 版))
<http://lists.w3.org/Archives/Public/public-webapps/2014JanMar/0627.html>

[434] [CITE[IRC logs: freenode / #whatwg / 20140325]]
( ([TIME[2014-03-26 19:34:05 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20140325#l-636>

[435] [CITE@en[Web Applications 1.0 r8788 Split off contentEditable DOM aspects for resuse elsewhere.]]
( ([TIME[2014-09-19 06:32:00 +09:00]] 版))
<https://html5.org/r/8788>

-[6] [CITE@en[Editing]]
([TIME[2015-06-23 18:52:21 +09:00]] 版)
<https://w3c.github.io/editing/>
-- [73] 
[CITE@en[The Editing taskforce]], [TIME[2024-09-12T14:50:17.000Z]], [TIME[2016-12-29T16:25:27.926Z]] <https://web.archive.org/web/20161229162512/http://w3c.github.io/editing/>
-- [74] 
[CITE@en[The Editing taskforce]], [TIME[2024-09-12T14:51:09.000Z]], [TIME[2018-12-30T12:21:14.880Z]] <https://web.archive.org/web/20181230122035/http://w3c.github.io/editing/>
-- [75] 
[CITE@en-US[Web Editing Working Group | editing]], [TIME[2024-09-12T14:03:56.000Z]], [TIME[2024-09-12T14:51:27.329Z]] <https://w3c.github.io/editing/>

-[7] [CITE@en[ContentEditable]]
([TIME[2015-06-23 18:52:21 +09:00]] 版)
<https://w3c.github.io/editing/contentEditable.html>

[8] [CITE@en[ContentEditableTrue]]
([TIME[2015-06-23 18:52:21 +09:00]] 版)
<https://w3c.github.io/editing/contentEditableTrue.html>

[9] [CITE@en[ContentEditableTyping]]
([TIME[2015-06-23 18:52:21 +09:00]] 版)
<https://w3c.github.io/editing/contentEditableTyping.html>

[10] [CITE@en[first step, different types of cE · w3c/editing@60e5f95]]
([TIME[2015-12-01 11:48:44 +09:00]] 版)
<https://github.com/w3c/editing/commit/60e5f95d27ba21dceb18ea1c70cb652f127ec6e1>

[11] [CITE@en[add cE states to contentEditable.html · w3c/editing@c7df19c]]
([TIME[2015-12-01 11:52:54 +09:00]] 版)
<https://github.com/w3c/editing/commit/c7df19ca42d1ee648b83327d4046eda0b4a53a49>

[12] [CITE@en[move definitions from cE=events -> cE document · w3c/editing@7cbb113]]
([TIME[2015-12-01 11:53:46 +09:00]] 版)
<https://github.com/w3c/editing/commit/7cbb11365817e2f6636c3bb4b3b997ccb8cf2f93>

[13] [CITE@en[clean up and merge existing docs · w3c/editing@37a1e19]]
([TIME[2015-12-01 11:54:25 +09:00]] 版)
<https://github.com/w3c/editing/commit/37a1e19325b43679aa16f1265a182d59f770b167>

[14] [CITE@en[Remove ContentEditableTrue since it doesn't have any content per 1/7 … · w3c/editing@af4b7f0]]
([TIME[2016-01-10 11:40:03 +09:00]] 版)
<https://github.com/w3c/editing/commit/af4b7f04ee0ac130cb87380548a7f8536c80835d>

[15] [CITE@en[Re: time at TPAC other than Wednesday?]]
([[Ryosuke Niwa]] 著, [TIME[2016-01-10 06:29:28 +09:00]] 版)
<https://lists.w3.org/Archives/Public/public-webapps/2016JanMar/0021.html>

[16] [CITE@en[Revert "Remove ContentEditableTrue" · w3c/editing@a51494e]]
([TIME[2016-01-27 12:07:34 +09:00]] 版)
<https://github.com/w3c/editing/commit/a51494e83123c86ca952fcf853210977978d1ded>

[17] [CITE@en[added issue regardingng need of contentEditable=True spec · w3c/editing@c8e6667]]
([TIME[2016-01-27 12:08:01 +09:00]] 版)
<https://github.com/w3c/editing/commit/c8e666784f9b815a9335c63b1e29f4ea0743aba5>

[21] [CITE@en[52800 - No visual aids for image and table editing - chromium - Monorail]]
([TIME[2017-02-19 18:25:45 +09:00]])
<https://bugs.chromium.org/p/chromium/issues/detail?id=52800>

[62] [CITE@en[add plaintext-only to list of editing host states]]
([[johanneswilm]]著, [TIME[2017-06-23 09:59:50 +09:00]])
<https://github.com/w3c/editing/commit/e23f29c1025cf1516090037c217bbc05a5ff3352>

[63] [CITE@en[Move inputmode to not be dependent on forms · Issue #1897 · whatwg/html]]
([TIME[2017-12-17 22:42:10 +09:00]])
<https://github.com/whatwg/html/issues/1897>

[64] [CITE@en[Remove inputmode · Issue #3077 · whatwg/html]]
([TIME[2017-12-17 22:43:49 +09:00]])
<https://github.com/whatwg/html/issues/3077>

[65] [CITE@en[Refine the inputmode attribute, exposing it on contenteditable. by dtapuska · Pull Request #3260 · whatwg/html]]
([TIME[2017-12-17 22:54:10 +09:00]])
<https://github.com/whatwg/html/pull/3260>

[66] [CITE@en[Use Web IDL's new-ish interface mixins concept]]
([[romandev]]著, [TIME[2017-12-21 05:39:18 +09:00]])
<https://github.com/whatwg/html/commit/c8867a179c21134021dc3435e98c1b9c4542d794>

[67] [CITE@en[Add the enterkeyhint="" attribute]]
([[dtapuska]]著, [TIME[2018-09-13 05:53:59 +09:00]])
<https://github.com/whatwg/html/commit/a5422d984d9b7b8a4e0ad7a0ad237b07f190cc93>

[68] [CITE@en[Relationship to HTML · Issue #2 · w3c/contentEditable]]
([TIME[2019-12-29 18:25:15 +09:00]])
<https://github.com/w3c/contentEditable/issues/2>

[69] [CITE@en[w3c/contentEditable]]
([TIME[2019-12-29 18:26:23 +09:00]])
<https://github.com/w3c/contentEditable>

[70] [CITE@en[ContentEditable]]
([TIME[2019-12-04 22:18:22 +09:00]])
<https://w3c.github.io/contentEditable/>

[FIG(quote)[
[FIGCAPTION[
[71] [CITE[「動画説明文」のHTMLエディタの挙動を変更しました【PC版ニコニコ動画】|ニコニコインフォ]]
([TIME[2020-09-01 16:29:29 +09:00]])
<https://blog.nicovideo.jp/niconews/139635.html?ref=video_watch_html5_marquee>
]FIGCAPTION]

> 説明文をコピー&ペーストする際に、意図しないスタイルがペーストされないよう、改行タグ以外のスタイルを反映しないよう変更しました。
> これまで、動画説明文を他サイトなどからコピー&ペーストした際に、カラーコードなどのスタイルも反映されておりました。

]FIG]

[72] [CITE@en[ContentEditable - HTML Editing APIs]]
([TIME[2024-02-02T09:51:37.000Z]], [TIME[2024-09-12T14:33:03.581Z]])
<https://www.w3.org/community/editing/wiki/ContentEditable.html>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)