html5/spec-author-view/editing_ix.html - view

File: [Public] / html5 / spec-author-view / editing_ix.html
Revision 1.3: download - view: text, annotated - select for diffs
Thu Oct 11 15:49:09 2012 UTC (12 years, 11 months ago) by rberjon
Branches: MAIN
CVS tags: HEAD

spec now valid

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html class="split chapter" lang="en-US-x-Hixie"><meta content="text/html; charset=utf8" http-equiv="Content-Type"><title>7 User interaction — HTML5 (Edition for Web Authors)</title><meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"><link href="whatwg.css" rel="stylesheet"><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } dt dfn { font-style: italic; } pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } pre em { font-weight: bolder; font-style: normal; } @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } table { border-collapse: collapse; border-style: hidden hidden none hidden; } table thead, table tbody { border-bottom: solid; } table tbody th:first-child { border-left: solid; } table tbody th { text-align: left; } table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } .matrix, .matrix td { border: none; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } img.extra { float: right; } pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } pre.css:first-line { color: #AAAA50; } dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; } hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } dl.domintro dd p { margin: 0.5em 0; } dl.switch { padding-left: 2em; } dl.switch > dt { text-indent: -1.5em; } dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } dl.triple { padding: 0 0 0 1em; } dl.triple dt, dl.triple dd { margin: 0; display: inline } dl.triple dt:after { content: ':'; } dl.triple dd:after { content: '\A'; white-space: pre; } .diff-old { text-decoration: line-through; color: silver; background: transparent; } .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } a .diff-new { border-bottom: 1px blue solid; } h2 { page-break-before: always; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } h1 + h2, hr + h2.no-toc { page-break-before: auto; } p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), { border-bottom: solid #9999CC; } div.head { margin: 0 0 1em; padding: 1em 0 0 0; } div.head p { margin: 0; } div.head h1 { margin: 0; } div.head .logo { float: right; margin: 0 1em; } div.head .logo img { border: none } /* remove border from top image */ div.head dl { margin: 1em 0; } div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } body > .toc > li { margin-top: 1em; margin-bottom: 1em; } body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } body > .toc > li > * { margin-bottom: 0.5em; } body > .toc > li > * > li > * { margin-bottom: 0.25em; } .toc, .toc li { list-style: none; } .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } .brief li { margin: 0; padding: 0; } .brief li p { margin: 0; padding: 0; } .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } .category-list li { display: inline; } .category-list li:not(:last-child)::after { content: ', '; } .category-list li > span, .category-list li > a { text-transform: lowercase; } .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } .XXX > :first-child { margin-top: 0; } p .XXX { line-height: 3em; } .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } .annotation :link, .annotation :visited { color: inherit; } .annotation :link:hover, .annotation :visited:hover { background: transparent; } .annotation span { border: none ! important; } .note { color: green; background: transparent; font-family: sans-serif; } .warning { color: red; background: transparent; } .note, .warning { font-weight: bolder; font-style: italic; } p.note, div.note { padding: 0.5em 2em; } span.note { padding: 0 2em; } .note p:first-child, .warning p:first-child { margin-top: 0; } .note p:last-child, .warning p:last-child { margin-bottom: 0; } .warning:before { font-style: normal; } p.note:before { content: 'Note: '; } p.warning:before { content: '\26A0 Warning! '; } .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } .bookkeeping { font-size: 0.8em; margin: 2em 0; } .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } .bookkeeping dt { margin: 0.5em 2em 0; } .bookkeeping dd { margin: 0 3em 0.5em; } h4 { position: relative; z-index: 3; } h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } .element { background: #EEEEFF; color: black; margin: 0 0 1em 0.15em; padding: 0 1em 0.25em 0.75em; border-left: solid #9999FF 0.25em; position: relative; z-index: 1; } .element:before { position: absolute; z-index: 2; top: 0; left: -1.15em; height: 2em; width: 0.9em; background: #EEEEFF; content: ' '; border-style: none none solid solid; border-color: #9999FF; border-width: 0.25em; } .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } td > .example:only-child { margin: 0 0 0 0.1em; } ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } ul.domTree li li { list-style: none; } ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } ul.domTree span { font-style: italic; font-family: serif; } ul.domTree .t1 code { color: purple; font-weight: bold; } ul.domTree .t2 { font-style: normal; font-family: monospace; } ul.domTree .t2 .name { color: black; font-weight: bold; } ul.domTree .t2 .value { color: blue; font-weight: normal; } ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } ul.domTree .t7 code, .domTree .t8 code { color: green; } ul.domTree .t10 code { color: teal; } body.dfnEnabled dfn { cursor: pointer; } .dfnPanel { display: inline; position: absolute; z-index: 10; height: auto; width: auto; padding: 0.5em 0.75em; font: small sans-serif, Droid Sans Fallback; background: #DDDDDD; color: black; border: outset 0.2em; } .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; } .dfnPanel :link, .dfnPanel :visited { color: black; } .dfnPanel p { font-weight: bolder; } .dfnPanel * + p { margin-top: 0.25em; } .dfnPanel li { list-style-position: inside; } #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } #configUI p label { display: block; } #configUI #updateUI, #configUI .loginUI { text-align: center; } #configUI input[type=button] { display: block; margin: auto; } fieldset { margin: 1em; padding: 0.5em 1em; } fieldset > legend + * { margin-top: 0; } fieldset > :last-child { margin-bottom: 0; } fieldset p { margin: 0.5em 0; } </style><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="style.css" rel="stylesheet"><script src="link-fixup.js"></script><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script type="text/javascript"> function getCookie(name) { var params = location.search.substr(1).split("&"); for (var index = 0; index < params.length; index++) { if (params[index] == name) return "1"; var data = params[index].split("="); if (data[0] == name) return unescape(data[1]); } var cookies = document.cookie.split("; "); for (var index = 0; index < cookies.length; index++) { var data = cookies[index].split("="); if (data[0] == name) return unescape(data[1]); } return null; } function load(script) { var e = document.createElement('script'); e.setAttribute('src', script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); document.body.appendChild(e); } function init() { if (location.search == '?slow-browser') return; var configUI = document.createElement('div'); configUI.id = 'configUI'; document.body.appendChild(configUI); if (document.getElementById('head')) load('toc.js'); load('dfn.js'); if (getCookie('profile') == '1') document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; fixBrokenLink(); } </script><link href="timers.html" rel="prev" title="6.3 Timers"> <link href="Overview.html#contents" rel="index" title="Table of contents"> <link href="syntax_ix.html" rel="next" title="8 The HTML syntax"> <body onload="fixBrokenLink(); init()"><div class="head" id="head"> <a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a> <h1>HTML5 Edition for Web Authors revision 1.4841</h1> </div><div> <a href="timers.html">← 6.3 Timers</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="syntax_ix.html">8 The HTML syntax →</a> <ol class="toc"><li><ol><li><a href="editing_ix.html#activation">7.2 Activation</a><li><a href="editing_ix.html#focus">7.3 Focus</a> <ol><li><a href="editing_ix.html#sequential-focus-navigation-and-the-tabindex-attribute">7.3.1 Sequential focus navigation and the <code title="attr-tabindex">tabindex</code> attribute</a><li><a href="editing_ix.html#document-level-focus-apis">7.3.3 Document-level focus APIs</a><li><a href="editing_ix.html#element-level-focus-apis">7.3.4 Element-level focus APIs</a></ol><li><a href="editing_ix.html#assigning-keyboard-shortcuts">7.4 Assigning keyboard shortcuts</a> <ol><li><a href="editing_ix.html#introduction-5">7.4.1 Introduction</a></ol><li><a href="editing_ix.html#contenteditable">7.5 The <code title="attr-contenteditable">contenteditable</code> attribute</a> <ol><li><a href="editing_ix.html#making-entire-documents-editable">7.5.2 Making entire documents editable</a></ol><li><a href="editing_ix.html#spelling-and-grammar-checking">7.6 Spelling and grammar checking</a><ol><li><a href="editing_ix.html#introduction-6">7.7.1 Introduction</a><li><a href="editing_ix.html#the-drag-data-store">7.7.2 The drag data store</a><li><a href="editing_ix.html#the-datatransfer-interface">7.7.3 The <code>DataTransfer</code> interface</a> <ol><li><a href="editing_ix.html#the-datatransferitems-interface">7.7.3.1 The <code>DataTransferItems</code> interface</a><li><a href="editing_ix.html#the-datatransferitem-interface">7.7.3.2 The <code>DataTransferItem</code> interface</a></ol><li><a href="editing_ix.html#the-dragevent-interface">7.7.4 The <code>DragEvent</code> interface</a><li><a href="editing_ix.html#dndevents">7.7.6 Events summary</a></ol><li><a href="editing_ix.html#editing-apis">7.8 Editing APIs</a></ol></ol></div> <h2 id="editing_ix">7 <dfn>User interaction</dfn></h2><h3 id="the-hidden-attribute_ix">7.1 The <dfn title="attr-hidden"><code>hidden</code></dfn> attribute</h3>All <a class="full-spec-link" href="http://dev.w3.org/html5/spec/infrastructure.html#html-elements" id="html-elements-34_ix" title='Read about this "HTML elements" reference in the full HTML5 spec.'>HTML elements</a> may have the <code title="attr-hidden"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#the-hidden-attribute" id="hidden-4_ix" title='Read about this "hidden" reference in the full HTML5 spec.'>hidden</a></code> content attribute set. The <code title="attr-hidden"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#the-hidden-attribute" id="hidden-5_ix" title='Read about this "hidden" reference in the full HTML5 spec.'>hidden</a></code> attribute is a <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-microsyntaxes.html#boolean-attribute" id="boolean-attribute-26_ix" title='Read about this "boolean attribute" reference in the full HTML5 spec.'>boolean attribute</a>. When specified on an element, it indicates that the element is not yet, or is no longer, relevant. <div class="example"> In the following skeletal example, the attribute is used to hide the Web game's main screen until the user logs in: <pre> <h1>The Example Game</h1> <section id="login"> <h2>Login</h2> <form> ... <!-- calls login() once the user's credentials have been checked --> </form> <script> function login() { // switch screens document.getElementById('login').hidden = true; document.getElementById('game').hidden = false; } </script> </section> <section id="game" hidden> ... </section></pre> </div>The <code title="attr-hidden"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#the-hidden-attribute" id="hidden-6_ix" title='Read about this "hidden" reference in the full HTML5 spec.'>hidden</a></code> attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use <code title="attr-hidden"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#the-hidden-attribute" id="hidden-7_ix" title='Read about this "hidden" reference in the full HTML5 spec.'>hidden</a></code> to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked <code title="attr-hidden"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#the-hidden-attribute" id="hidden-8_ix" title='Read about this "hidden" reference in the full HTML5 spec.'>hidden</a></code>, it is hidden from all presentations, including, for instance, screen readers.Elements that are not <code title="attr-hidden"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#the-hidden-attribute" id="hidden-9_ix" title='Read about this "hidden" reference in the full HTML5 spec.'>hidden</a></code> should not link to or refer to elements that are <code title="attr-hidden"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#the-hidden-attribute" id="hidden-10_ix" title='Read about this "hidden" reference in the full HTML5 spec.'>hidden</a></code>.<div class="example"> For example, it would be incorrect to use the <code title="attr-hyperlink-href"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/links.html#attr-hyperlink-href" id="href-24_ix" title='Read about this "href" reference in the full HTML5 spec.'>href</a></code> attribute to link to a section marked with the <code title="attr-hidden"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#the-hidden-attribute" id="hidden-11_ix" title='Read about this "hidden" reference in the full HTML5 spec.'>hidden</a></code> attribute. If the content is not applicable or relevant, then there is no reason to link to it. It would similarly be incorrect to use the ARIA <code title="attr-aria-describedby">aria-describedby</code> attribute to refer to descriptions that are themselves <code title="attr-hidden"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#the-hidden-attribute" id="hidden-12_ix" title='Read about this "hidden" reference in the full HTML5 spec.'>hidden</a></code>. Hiding a section means that it is not applicable or relevant to anyone at the current time, so clearly it cannot be a valid description of content the user can interact with. </div>Elements in a section hidden by the <code title="attr-hidden"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#the-hidden-attribute" id="hidden-13_ix" title='Read about this "hidden" reference in the full HTML5 spec.'>hidden</a></code> attribute are still active, e.g. scripts and form controls in such sections still execute and submit respectively. Only their presentation to the user changes.<h3 id="activation">7.2 Activation</h3><dl class="domintro"><dt><var title="">element</var> . <code title="dom-click"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#dom-click" title='Read about this "click" reference in the full HTML5 spec.'>click</a></code>()</dt> <dd> Acts as if the element was clicked. </dd> </dl><h3 id="focus">7.3 Focus</h3><h4 id="sequential-focus-navigation-and-the-tabindex-attribute">7.3.1 Sequential focus navigation and the <code title="attr-tabindex"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#attr-tabindex" id="tabindex-0_ix" title='Read about this "tabindex" reference in the full HTML5 spec.'>tabindex</a></code> attribute</h4>The <dfn id="attr-tabindex_ix" title="attr-tabindex"><code>tabindex</code></dfn> content attribute specifies whether the element is focusable, whether it can be reached using sequential focus navigation, and the relative order of the element for the purposes of sequential focus navigation. The name "tab index" comes from the common use of the "tab" key to navigate through the focusable elements. The term "tabbing" refers to moving forward through the focusable elements that can be reached using sequential focus navigation.The <code title="attr-tabindex"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#attr-tabindex" id="tabindex-1_ix" title='Read about this "tabindex" reference in the full HTML5 spec.'>tabindex</a></code> attribute, if specified, must have a value that is a <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-microsyntaxes.html#valid-integer" id="valid-integer-5_ix" title='Read about this "valid integer" reference in the full HTML5 spec.'>valid integer</a>.<h4 id="document-level-focus-apis">7.3.2 Document-level focus APIs</h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-activeElement"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#dom-document-activeelement" title='Read about this "activeElement" reference in the full HTML5 spec.'>activeElement</a></code></dt> <dd> Returns the currently focused element. </dd> <dt><var title="">document</var> . <code title="dom-document-hasFocus"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#dom-document-hasfocus" title='Read about this "hasFocus" reference in the full HTML5 spec.'>hasFocus</a></code>()</dt> <dd> Returns true if the document has focus; otherwise, returns false. </dd> <dt><var title="">window</var> . <code title="dom-window-focus"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#dom-window-focus" title='Read about this "focus" reference in the full HTML5 spec.'>focus</a></code>()</dt> <dd> Focuses the window. Use of this method is discouraged. Allow the user to control window focus instead. </dd> <dt><var title="">window</var> . <code title="dom-window-blur"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#dom-window-blur" title='Read about this "blur" reference in the full HTML5 spec.'>blur</a></code>()</dt> <dd> Unfocuses the window. Use of this method is discouraged. Allow the user to control window focus instead. </dd> </dl><h4 id="element-level-focus-apis">7.3.3 Element-level focus APIs</h4><dl class="domintro"><dt><var title="">element</var> . <code title="dom-focus"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#dom-focus" title='Read about this "focus" reference in the full HTML5 spec.'>focus</a></code>()</dt> <dd> Focuses the element. </dd> <dt><var title="">element</var> . <code title="dom-blur"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#dom-blur" title='Read about this "blur" reference in the full HTML5 spec.'>blur</a></code>()</dt> <dd> Unfocuses the element. Use of this method is discouraged. Focus another element instead. Do not use this method to hide the focus ring if you find the focus ring unsightly. Instead, use a CSS rule to override the 'outline' property. <div class="example"> For example, to hide the outline from links, you could use: <pre>:link:focus, :visited:focus { outline: none; }</pre> </div> </dd> </dl><h3 id="assigning-keyboard-shortcuts">7.4 Assigning keyboard shortcuts</h3><h4 id="introduction-5">7.4.1 Introduction</h4>This section is non-normative.Each element that can be activated or focused can be assigned a single key combination to activate it, using the <code title="attr-accesskey"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#the-accesskey-attribute" id="accesskey-1_ix" title='Read about this "accesskey" reference in the full HTML5 spec.'>accesskey</a></code> attribute.The exact shortcut is determined by the user agent, based on information about the user's keyboard, what keyboard shortcuts already exist on the platform, and what other shortcuts have been specified on the page, using the information provided in the <code title="attr-accesskey"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#the-accesskey-attribute" id="accesskey-2_ix" title='Read about this "accesskey" reference in the full HTML5 spec.'>accesskey</a></code> attribute as a guide.In order to ensure that a relevant keyboard shortcut is available on a wide variety of input devices, the author can provide a number of alternatives in the <code title="attr-accesskey"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#the-accesskey-attribute" id="accesskey-3_ix" title='Read about this "accesskey" reference in the full HTML5 spec.'>accesskey</a></code> attribute.Each alternative consists of a single character, such as a letter or digit.User agents can provide users with a list of the keyboard shortcuts, but authors are encouraged to do so also. The <code title="dom-accessKeyLabel"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#dom-accesskeylabel" title='Read about this "accessKeyLabel" reference in the full HTML5 spec.'>accessKeyLabel</a></code> IDL attribute returns a string representing the actual key combination assigned by the user agent.<h4 id="the-accesskey-attribute_ix">7.4.2 The <dfn title="attr-accesskey"><code>accesskey</code></dfn> attribute</h4>All <a class="full-spec-link" href="http://dev.w3.org/html5/spec/infrastructure.html#html-elements" id="html-elements-35_ix" title='Read about this "HTML elements" reference in the full HTML5 spec.'>HTML elements</a> may have the <code title="attr-accesskey"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#the-accesskey-attribute" id="accesskey-4_ix" title='Read about this "accesskey" reference in the full HTML5 spec.'>accesskey</a></code> content attribute set. The <code title="attr-accesskey"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#the-accesskey-attribute" id="accesskey-5_ix" title='Read about this "accesskey" reference in the full HTML5 spec.'>accesskey</a></code> attribute's value is used by the user agent as a guide for creating a keyboard shortcut that activates or focuses the element.If specified, the value must be an <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-microsyntaxes.html#ordered-set-of-unique-space-separated-tokens" id="ordered-set-of-unique-space-separated-tokens-1_ix" title='Read about this "ordered set of unique space-separated tokens" reference in the full HTML5 spec.'>ordered set of unique space-separated tokens</a> that are <a class="full-spec-link" href="http://dev.w3.org/html5/spec/infrastructure.html#case-sensitive" id="case-sensitive-6_ix" title='Read about this "case-sensitive" reference in the full HTML5 spec.'>case-sensitive</a>, each of which must be exactly one Unicode code point in length.<div class="example"> In the following example, a variety of links are given with access keys so that keyboard users familiar with the site can more quickly navigate to the relevant pages: <pre><nav> <p> <a title="Consortium Activities" accesskey="A" href="/Consortium/activities">Activities</a> | <a title="Technical Reports and Recommendations" accesskey="T" href="/TR/">Technical Reports</a> | <a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex">Site Index</a> | <a title="About This Site" accesskey="B" href="/Consortium/">About Consortium</a> | <a title="Contact Consortium" accesskey="C" href="/Consortium/contact">Contact</a> </p> </nav></pre> </div><div class="example"> In the following example, the search field is given two possible access keys, "s" and "0" (in that order). A user agent on a device with a full keyboard might pick <kbd><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>S</kbd></kbd> as the shortcut key, while a user agent on a small device with just a numeric keypad might pick just the plain unadorned key <kbd><kbd>0</kbd></kbd>: <pre><form action="/search"> <label>Search: <input type="search" name="q" accesskey="s 0"></label> <input type="submit"> </form></pre> </div><div class="example"> In the following example, a button has possible access keys described. A script then tries to update the button's label to advertise the key combination the user agent selected. <pre><input type=submit accesskey="N @ 1" value="Compose"> ... <script> function labelButton(button) { if (button.accessKeyLabel) button.value += ' (' + button.accessKeyLabel + ')'; } var inputs = document.getElementsByTagName('input'); for (var i = 0; i < inputs.length; i += 1) { if (inputs[i].type == "submit") labelButton(inputs[i]); } </script></pre> On one user agent, the button's label might become "<samp>Compose (⌘N)</samp>". On another, it might become "<samp>Compose (Alt+⇧+1)</samp>". If the user agent doesn't assign a key, it will be just "<samp>Compose</samp>". The exact string depends on what the <a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#assigned-access-key" title='Read about this "assigned access key" reference in the full HTML5 spec.'>assigned access key</a> is, and on how the user agent represents that key combination. </div><h3 id="contenteditable">7.5 The <code title="attr-contenteditable"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#attr-contenteditable" id="contenteditable-1_ix" title='Read about this "contenteditable" reference in the full HTML5 spec.'>contenteditable</a></code> attribute</h3>The <dfn id="attr-contenteditable_ix" title="attr-contenteditable"><code>contenteditable</code></dfn> attribute is an <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-microsyntaxes.html#enumerated-attribute" id="enumerated-attribute-16_ix" title='Read about this "enumerated attribute" reference in the full HTML5 spec.'>enumerated attribute</a> whose keywords are the empty string, <code title="">true</code>, and <code title="">false</code>. The empty string and the <code title="">true</code> keyword map to the true state. The <code title="">false</code> keyword maps to the false state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default).The true state indicates that the element is editable. The inherit state indicates that the element is editable if its parent is. The false state indicates that the element is not editable.<dl class="domintro"><dt><var title="">element</var> . <code title="dom-contentEditable"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#dom-contenteditable" title='Read about this "contentEditable" reference in the full HTML5 spec.'>contentEditable</a></code> [ = <var title="">value</var> ]</dt> <dd> Returns "<code title="">true</code>", "<code title="">false</code>", or "<code title="">inherit</code>", based on the state of the <code title="attr-contenteditable"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#attr-contenteditable" id="contenteditable-2_ix" title='Read about this "contenteditable" reference in the full HTML5 spec.'>contenteditable</a></code> attribute. Can be set, to change that state. Throws a <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-dom-interfaces.html#syntax_err" id="syntax_err-9_ix" title='Read about this "SYNTAX_ERR" reference in the full HTML5 spec.'>SYNTAX_ERR</a></code> exception if the new value isn't one of those strings. </dd> <dt><var title="">element</var> . <code title="dom-isContentEditable"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#dom-iscontenteditable" title='Read about this "isContentEditable" reference in the full HTML5 spec.'>isContentEditable</a></code></dt> <dd> Returns true if the element is editable; otherwise, returns false. </dd> </dl><h4 id="making-entire-documents-editable">7.5.1 Making entire documents editable</h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-designMode"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#designMode" title='Read about this "designMode" reference in the full HTML5 spec.'>designMode</a></code> [ = <var title="">value</var> ]</dt> <dd> Returns "<code title="">on</code>" if the document is editable, and "<code title="">off</code>" if it isn't. Can be set, to change the document's current state. </dd> </dl><h3 id="spelling-and-grammar-checking">7.6 Spelling and grammar checking</h3>The <dfn id="attr-spellcheck_ix" title="attr-spellcheck"><code>spellcheck</code></dfn> attribute is an <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-microsyntaxes.html#enumerated-attribute" id="enumerated-attribute-17_ix" title='Read about this "enumerated attribute" reference in the full HTML5 spec.'>enumerated attribute</a> whose keywords are the empty string, <code title="">true</code> and <code title="">false</code>. The empty string and the <code title="">true</code> keyword map to the true state. The <code title="">false</code> keyword maps to the false state. In addition, there is a third state, the default state, which is the missing value default (and the invalid value default).The true state indicates that the element is to have its spelling and grammar checked. The default state indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code title="attr-spellcheck"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#attr-spellcheck" id="spellcheck-0_ix" title='Read about this "spellcheck" reference in the full HTML5 spec.'>spellcheck</a></code> state. The false state indicates that the element is not to be checked.<dl class="domintro"><dt><var title="">element</var> . <code title="dom-spellcheck"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#dom-spellcheck" title='Read about this "spellcheck" reference in the full HTML5 spec.'>spellcheck</a></code> [ = <var title="">value</var> ]</dt> <dd> Returns true if the element is to have its spelling and grammar checked; otherwise, returns false. Can be set, to override the default and set the <code title="attr-spellcheck"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#attr-spellcheck" id="spellcheck-1_ix" title='Read about this "spellcheck" reference in the full HTML5 spec.'>spellcheck</a></code> content attribute. </dd> </dl>This specification does not define the user interface for spelling and grammar checkers. A user agent could offer on-demand checking, could perform continuous checking while the checking is enabled, or could use other interfaces.<h3 id="dnd_ix">7.7 <dfn>Drag and drop</dfn></h3>This section defines an event-based drag-and-drop mechanism.This specification does not define exactly what a drag-and-drop operation actually is.On a visual medium with a pointing device, a drag operation could be the default action of a <code title="event-mousedown">mousedown</code> event that is followed by a series of <code title="event-mousemove">mousemove</code> events, and the drop could be triggered by the mouse being released.On media without a pointing device, the user would probably have to explicitly indicate his intention to perform a drag-and-drop operation, stating what he wishes to drag and where he wishes to drop it, respectively.<h4 id="introduction-6">7.7.1 Introduction</h4>This section is non-normative.To make an element draggable is simple: give the element a <code title="attr-draggable"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-draggable-attribute" id="draggable-0_ix" title='Read about this "draggable" reference in the full HTML5 spec.'>draggable</a></code> attribute, and set an event listener for <code title="event-dragstart"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#event-dragstart" id="dragstart_ix" title='Read about this "dragstart" reference in the full HTML5 spec.'>dragstart</a></code> that stores the data being dragged.The event handler typically needs to check that it's not a text selection that is being dragged, and then needs to store data into the <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer" id="datatransfer-0_ix" title='Read about this "DataTransfer" reference in the full HTML5 spec.'>DataTransfer</a></code> object and set the allowed effects (copy, move, link, or some combination).For example:<pre><p>What fruits do you like?</p> <ol ondragstart="dragStartHandler(event)"> <li draggable="true" data-value="fruit-apple">Apples</li> <li draggable="true" data-value="fruit-orange">Oranges</li> <li draggable="true" data-value="fruit-pear">Pears</li> </ol> <script> var internalDNDType = 'text/x-example'; // set this to something specific to your site function dragStartHandler(event) { if (event.target instanceof HTMLLIElement) { // use the element's data-value="" attribute as the value to be moving: event.dataTransfer.setData(internalDNDType, event.target.dataset.value); event.dataTransfer.effectAllowed = 'move'; // only allow moves } else { event.preventDefault(); // don't allow selection to be dragged } } </script></pre><hr>To accept a drop, the drop target has to have a <code title="attr-dropzone"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-dropzone-attribute" id="dropzone-0_ix" title='Read about this "dropzone" reference in the full HTML5 spec.'>dropzone</a></code> attribute and listen to the <code title="drop-event">drop</code> event.The value of the <code title="attr-dropzone"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-dropzone-attribute" id="dropzone-1_ix" title='Read about this "dropzone" reference in the full HTML5 spec.'>dropzone</a></code> attribute specifies what kind of data to accept (e.g. "<code title="">s:text/plain</code>" to accept any text strings, or "<code>f:image/png</code>" to accept a PNG image file) and what kind of feedback to give (e.g. "<code>move</code>" to indicate that the data will be moved).Instead of using the <code title="attr-dropzone"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-dropzone-attribute" id="dropzone-2_ix" title='Read about this "dropzone" reference in the full HTML5 spec.'>dropzone</a></code> attribute, a drop target can handle the <code title="event-dragenter"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#event-dragenter" id="dragenter_ix" title='Read about this "dragenter" reference in the full HTML5 spec.'>dragenter</a></code> event (to report whether or not the drop target is to accept the drop) and the <code title="event-dragover"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#event-dragover" id="dragover_ix" title='Read about this "dragover" reference in the full HTML5 spec.'>dragover</a></code> event (to specify what feedback is to be shown to the user).The <code title="event-drop"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#event-drop" id="drop_ix" title='Read about this "drop" reference in the full HTML5 spec.'>drop</a></code> event allows the actual drop to be performed. This event needs to be canceled, so that the <code title="dom-DataTransfer-DropEffect"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-dropeffect" title='Read about this "dropEffect" reference in the full HTML5 spec.'>dropEffect</a></code> attribute's value can be used by the source (otherwise it's reset).For example:<pre><p>Drop your favorite fruits below:</p> <ol dropzone="move s:text/x-example" ondrop="dropHandler(event)"> <-- don't forget to change the "text/x-example" type to something specific to your site --> </ol> <script> var internalDNDType = 'text/x-example'; // set this to something specific to your site function dropHandler(event) { var li = document.createElement('li'); var data = event.dataTransfer.getData(internalDNDType); if (data == 'fruit-apple') { li.textContent = 'Apples'; } else if (data == 'fruit-orange') { li.textContent = 'Oranges'; } else if (data == 'fruit-pear') { li.textContent = 'Pears'; } else { li.textContent = 'Unknown Fruit'; } event.target.appendChild(li); } </script></pre><hr>To remove the original element (the one that was dragged) from the display, the <code title="event-dragend"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#event-dragend" id="dragend_ix" title='Read about this "dragend" reference in the full HTML5 spec.'>dragend</a></code> event can be used.For our example here, that means updating the original markup to handle that event:<pre><p>What fruits do you like?</p> <ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)"> ...as before... </ol> <script> function dragStartHandler(event) { // ...as before... } function dragEndHandler(event) { // remove the dragged element event.target.parentNode.removeChild(event.target); } </script></pre><h4 id="the-drag-data-store">7.7.2 The drag data store</h4>The data that underlies a drag-and-drop operation, known as the <dfn id="drag-data-store_ix">drag data store</dfn>, consists of the following information:<ul><li>A <dfn id="drag-data-store-item-list_ix">drag data store item list</dfn>, which is a list of items representing the dragged data, each consisting of the following information: <dl><dt><dfn id="the-drag-data-item-kind_ix">The drag data item kind</dfn></dt> <dd> The kind of data: <dl><dt>Plain Unicode string</dt> <dd> Text. </dd> <dt>File</dt> <dd> Binary data with a file name. </dd> </dl></dd> <dt><dfn id="the-drag-data-item-type-string_ix">The drag data item type string</dfn></dt> <dd> A Unicode string giving the type or format of the data, generally given by a <a class="full-spec-link" href="http://dev.w3.org/html5/spec/infrastructure.html#mime-type" id="mime-type-15_ix" title='Read about this "MIME type" reference in the full HTML5 spec.'>MIME type</a>. Some values that are not <a class="full-spec-link" href="http://dev.w3.org/html5/spec/infrastructure.html#mime-type" id="mime-type-16_ix" title='Read about this "MIME types" reference in the full HTML5 spec.'>MIME types</a> are special-cased for legacy reasons. The API does not enforce the use of <a class="full-spec-link" href="http://dev.w3.org/html5/spec/infrastructure.html#mime-type" id="mime-type-17_ix" title='Read about this "MIME types" reference in the full HTML5 spec.'>MIME types</a>; other values can be used as well. In all cases, however, the values are all <a class="full-spec-link" href="http://dev.w3.org/html5/spec/infrastructure.html#converted-to-ascii-lowercase" title='Read about this "converted to ASCII lowercase" reference in the full HTML5 spec.'>converted to ASCII lowercase</a> by the API. Strings that contain <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-microsyntaxes.html#space-character" title='Read about this "space characters" reference in the full HTML5 spec.'>space characters</a> cannot be used with the <code title="attr-dropzone"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-dropzone-attribute" id="dropzone-3_ix" title='Read about this "dropzone" reference in the full HTML5 spec.'>dropzone</a></code> attribute, so authors are encouraged to use only <a class="full-spec-link" href="http://dev.w3.org/html5/spec/infrastructure.html#mime-type" id="mime-type-18_ix" title='Read about this "MIME types" reference in the full HTML5 spec.'>MIME types</a> or custom strings (without spaces). There is a limit of one Plain Unicode string item per <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-drag-data-item-type-string" id="the-drag-data-item-type-string-0_ix" title='Read about this "item type string" reference in the full HTML5 spec.'>item type string</a>. </dd> <dt>The actual data</dt> <dd>A Unicode or binary string, in some cases with a file name (itself a Unicode string), as per <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-drag-data-item-kind" id="the-drag-data-item-kind-0_ix" title='Read about this "the drag data item kind" reference in the full HTML5 spec.'>the drag data item kind</a>.</dd> </dl>The <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store-item-list" id="drag-data-store-item-list-0_ix" title='Read about this "drag data store item list" reference in the full HTML5 spec.'>drag data store item list</a> is ordered in the order that the items were added to the list; most recently added last. </li> <li> The following information, used to generate the UI feedback during the drag: <ul><li>User-agent-defined default feedback information, known as the <dfn id="drag-data-store-default-feedback_ix">drag data store default feedback</dfn>.</li> <li>A list of zero or more elements known as the <dfn id="drag-data-store-elements-list_ix">drag data store elements list</dfn>.</li> <li>Optionally, a bitmap image and the coordinate of a point within that image, known as the <dfn id="drag-data-store-bitmap_ix">drag data store bitmap</dfn> and <dfn id="drag-data-store-hot-spot-coordinate_ix">drag data store hot spot coordinate</dfn>.</li> </ul></li> <li> A <dfn id="drag-data-store-mode_ix">drag data store mode</dfn>, which is one of the following: <dl><dt><dfn id="concept-dnd-rw_ix" title="concept-dnd-rw">Read/write mode</dfn></dt> <dd> For the <code title="event-dragstart"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#event-dragstart" id="dragstart-0_ix" title='Read about this "dragstart" reference in the full HTML5 spec.'>dragstart</a></code> event. New data can be added to the <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store" id="drag-data-store-0_ix" title='Read about this "drag data store" reference in the full HTML5 spec.'>drag data store</a>. </dd> <dt><dfn id="concept-dnd-ro_ix" title="concept-dnd-ro">Read-only mode</dfn></dt> <dd> For the <code title="event-drop"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#event-drop" id="drop-0_ix" title='Read about this "drop" reference in the full HTML5 spec.'>drop</a></code> event. The list of items representing dragged data can be read, including the data. No new data can be added. </dd> <dt><dfn id="concept-dnd-p_ix" title="concept-dnd-p">Protected mode</dfn></dt> <dd> For all other events. The formats and kinds in the <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store" id="drag-data-store-1_ix" title='Read about this "drag data store" reference in the full HTML5 spec.'>drag data store</a> list of items representing dragged data can be enumerated, but the data itself is unavailable and no new data can be added. </dd> </dl></li> <li> A <dfn id="drag-data-store-allowed-effects-state_ix">drag data store allowed effects state</dfn>, which is a string. </li> </ul>When a <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store" id="drag-data-store-2_ix" title='Read about this "drag data store" reference in the full HTML5 spec.'>drag data store</a> is <dfn id="create-a-drag-data-store_ix" title="create a drag data store">created</dfn>, it must be initialized such that its <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store-item-list" id="drag-data-store-item-list-1_ix" title='Read about this "drag data store item list" reference in the full HTML5 spec.'>drag data store item list</a> is empty, it has no <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store-default-feedback" id="drag-data-store-default-feedback-0_ix" title='Read about this "drag data store default feedback" reference in the full HTML5 spec.'>drag data store default feedback</a>, its <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store-elements-list" id="drag-data-store-elements-list-0_ix" title='Read about this "drag data store elements list" reference in the full HTML5 spec.'>drag data store elements list</a> is empty, it has no <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store-bitmap" id="drag-data-store-bitmap-0_ix" title='Read about this "drag data store bitmap" reference in the full HTML5 spec.'>drag data store bitmap</a> / <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store-hot-spot-coordinate" id="drag-data-store-hot-spot-coordinate-0_ix" title='Read about this "drag data store hot spot coordinate" reference in the full HTML5 spec.'>drag data store hot spot coordinate</a>, its <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store-mode" id="drag-data-store-mode-0_ix" title='Read about this "drag data store mode" reference in the full HTML5 spec.'>drag data store mode</a> is <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#concept-dnd-p" id="concept-dnd-p-0_ix" title='Read about this "protected mode" reference in the full HTML5 spec.'>protected mode</a>, and its <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store-allowed-effects-state" id="drag-data-store-allowed-effects-state-0_ix" title='Read about this "drag data store allowed effects state" reference in the full HTML5 spec.'>drag data store allowed effects state</a> is the string "<code title="">uninitialized</code>".<h4 id="the-datatransfer-interface">7.7.3 The <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer" id="datatransfer-1_ix" title='Read about this "DataTransfer" reference in the full HTML5 spec.'>DataTransfer</a></code> interface</h4><code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer" id="datatransfer-2_ix" title='Read about this "DataTransfer" reference in the full HTML5 spec.'>DataTransfer</a></code> objects are used to expose the <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store" id="drag-data-store-3_ix" title='Read about this "drag data store" reference in the full HTML5 spec.'>drag data store</a> that underlies a drag-and-drop operation.<pre class="idl">interface <dfn id="datatransfer_ix">DataTransfer</dfn> { attribute DOMString <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-dropeffect" title='Read about this "dropEffect" reference in the full HTML5 spec.'>dropEffect</a>; attribute DOMString <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-effectallowed" title='Read about this "effectAllowed" reference in the full HTML5 spec.'>effectAllowed</a>; readonly attribute <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransferitems" id="datatransferitems-0_ix" title='Read about this "DataTransferItems" reference in the full HTML5 spec.'>DataTransferItems</a> <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-items" title='Read about this "items" reference in the full HTML5 spec.'>items</a>; void <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-setdragimage" title='Read about this "setDragImage" reference in the full HTML5 spec.'>setDragImage</a>(in Element image, in long x, in long y); void <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-addelement" title='Read about this "addElement" reference in the full HTML5 spec.'>addElement</a>(in Element element); /* old interface */ readonly attribute DOMStringList <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-types" title='Read about this "types" reference in the full HTML5 spec.'>types</a>; DOMString <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-getdata" title='Read about this "getData" reference in the full HTML5 spec.'>getData</a>(in DOMString format); void <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-setdata" title='Read about this "setData" reference in the full HTML5 spec.'>setData</a>(in DOMString format, in DOMString data); void <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-cleardata" title='Read about this "clearData" reference in the full HTML5 spec.'>clearData</a>(in optional DOMString format); readonly attribute FileList <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-files" title='Read about this "files" reference in the full HTML5 spec.'>files</a>; };</pre><dl class="domintro"><dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-dropEffect"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-dropeffect" title='Read about this "dropEffect" reference in the full HTML5 spec.'>dropEffect</a></code> [ = <var title="">value</var> ]</dt> <dd> Returns the kind of operation that is currently selected. If the kind of operation isn't one of those that is allowed by the <code title="dom-DataTransfer-effectAllowed"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-effectallowed" title='Read about this "effectAllowed" reference in the full HTML5 spec.'>effectAllowed</a></code> attribute, then the operation will fail. Can be set, to change the selected operation. The possible values are "<code title="">none</code>", "<code title="">copy</code>", "<code title="">link</code>", and "<code title="">move</code>". </dd> <dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-effectAllowed"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-effectallowed" title='Read about this "effectAllowed" reference in the full HTML5 spec.'>effectAllowed</a></code> [ = <var title="">value</var> ]</dt> <dd> Returns the kinds of operations that are to be allowed. Can be set, to change the allowed operations. The possible values are "<code title="">none</code>", "<code title="">copy</code>", "<code title="">copyLink</code>", "<code title="">copyMove</code>", "<code title="">link</code>", "<code title="">linkMove</code>", "<code title="">move</code>", "<code title="">all</code>", and "<code title="">uninitialized</code>", </dd> <dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-items"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-items" title='Read about this "items" reference in the full HTML5 spec.'>items</a></code></dt> <dd> Returns a <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransferitems" id="datatransferitems-1_ix" title='Read about this "DataTransferItems" reference in the full HTML5 spec.'>DataTransferItems</a></code> object, with the drag data. </dd> <dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-setDragImage"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-setdragimage" title='Read about this "setDragImage" reference in the full HTML5 spec.'>setDragImage</a></code>(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>)</dt> <dd> Uses the given element to update the drag feedback, replacing any previously specified feedback. </dd> <dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-addElement"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-addelement" title='Read about this "addElement" reference in the full HTML5 spec.'>addElement</a></code>(<var title="">element</var>)</dt> <dd> Adds the given element to the list of elements used to render the drag feedback. </dd> <dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-types"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-types" title='Read about this "types" reference in the full HTML5 spec.'>types</a></code></dt> <dd> Returns a <code>DOMStringList</code> listing the formats that were set in the <code title="event-dragstart"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#event-dragstart" id="dragstart-1_ix" title='Read about this "dragstart" reference in the full HTML5 spec.'>dragstart</a></code> event. In addition, if any files are being dragged, then one of the types will be the string "<code title="">Files</code>". </dd> <dt><var title="">data</var> = <var title="">dataTransfer</var> . <code title="dom-DataTransfer-getData"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-getdata" title='Read about this "getData" reference in the full HTML5 spec.'>getData</a></code>(<var title="">format</var>)</dt> <dd> Returns the specified data. If there is no such data, returns the empty string. </dd> <dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-setData"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-setdata" title='Read about this "setData" reference in the full HTML5 spec.'>setData</a></code>(<var title="">format</var>, <var title="">data</var>)</dt> <dd> Adds the specified data. </dd> <dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-clearData"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-cleardata" title='Read about this "clearData" reference in the full HTML5 spec.'>clearData</a></code>( [ <var title="">format</var> ] )</dt> <dd> Removes the data of the specified formats. Removes all data if the argument is omitted. </dd> <dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-files"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-files" title='Read about this "files" reference in the full HTML5 spec.'>files</a></code></dt> <dd> Returns a <code>FileList</code> of the files being dragged, if any. </dd> </dl><code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer" id="datatransfer-3_ix" title='Read about this "DataTransfer" reference in the full HTML5 spec.'>DataTransfer</a></code> objects are used during the <a href="#dndevents">drag-and-drop events</a>, and are only valid while those events are being dispatched.<h5 id="the-datatransferitems-interface">7.7.3.1 The <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransferitems" id="datatransferitems-2_ix" title='Read about this "DataTransferItems" reference in the full HTML5 spec.'>DataTransferItems</a></code> interface</h5>Each <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer" id="datatransfer-4_ix" title='Read about this "DataTransfer" reference in the full HTML5 spec.'>DataTransfer</a></code> object is associated with a <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransferitems" id="datatransferitems-3_ix" title='Read about this "DataTransferItems" reference in the full HTML5 spec.'>DataTransferItems</a></code> object.<pre class="idl">interface <dfn id="datatransferitems_ix">DataTransferItems</dfn> { readonly attribute unsigned long <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitems-length" title='Read about this "length" reference in the full HTML5 spec.'>length</a>; <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitems-item" title='Read about this "getter" reference in the full HTML5 spec.'>getter</a> <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransferitem" id="datatransferitem-0_ix" title='Read about this "DataTransferItem" reference in the full HTML5 spec.'>DataTransferItem</a> (in unsigned long index); <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitems-removeitem" title='Read about this "deleter" reference in the full HTML5 spec.'>deleter</a> void (in unsigned long index); void <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitems-clear" title='Read about this "clear" reference in the full HTML5 spec.'>clear</a>(); <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransferitem" id="datatransferitem-1_ix" title='Read about this "DataTransferItem" reference in the full HTML5 spec.'>DataTransferItem</a> <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitems-add" title='Read about this "add" reference in the full HTML5 spec.'>add</a>(in DOMString data, in DOMString type); <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransferitem" id="datatransferitem-2_ix" title='Read about this "DataTransferItem" reference in the full HTML5 spec.'>DataTransferItem</a> <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitems-add" title='Read about this "add" reference in the full HTML5 spec.'>add</a>(in File data);};</pre><dl class="domintro"><dt><var title="">items</var> . <code title="dom-DataTransferItems-length"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitems-length" title='Read about this "length" reference in the full HTML5 spec.'>length</a></code></dt> <dd>Returns the number of items in the <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store" id="drag-data-store-4_ix" title='Read about this "drag data store" reference in the full HTML5 spec.'>drag data store</a>.</dd> <dt><var title="">items</var>[<var title="">index</var>]</dt> <dd> Returns the <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransferitem" id="datatransferitem-3_ix" title='Read about this "DataTransferItem" reference in the full HTML5 spec.'>DataTransferItem</a></code> object representing the <var title="">index</var>th entry in the <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store" id="drag-data-store-5_ix" title='Read about this "drag data store" reference in the full HTML5 spec.'>drag data store</a>. </dd> <dt><code title="">delete</code> <var title="">items</var>[<var title="">index</var>]</dt> <dd> Removes the <var title="">index</var>th entry in the <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store" id="drag-data-store-6_ix" title='Read about this "drag data store" reference in the full HTML5 spec.'>drag data store</a>. </dd> <dt><var title="">items</var> . <code title="dom-DataTransferItems-clear"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitems-clear" title='Read about this "clear" reference in the full HTML5 spec.'>clear</a></code>()</dt> <dd> Removes all the entries in the <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store" id="drag-data-store-7_ix" title='Read about this "drag data store" reference in the full HTML5 spec.'>drag data store</a>. </dd> <dt><var title="">items</var> . <code title="dom-DataTransferItems-add"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitems-add" title='Read about this "add" reference in the full HTML5 spec.'>add</a></code>(<var title="">data</var>)</dt> <dt><var title="">items</var> . <code title="dom-DataTransferItems-add"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitems-add" title='Read about this "add" reference in the full HTML5 spec.'>add</a></code>(<var title="">data</var>, <var title="">type</var>)</dt> <dd> Adds a new entry for the given data to the <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store" id="drag-data-store-8_ix" title='Read about this "drag data store" reference in the full HTML5 spec.'>drag data store</a>. If the data is plain text then a <var title="">type</var> string has to be provided also. </dd> </dl><h5 id="the-datatransferitem-interface">7.7.3.2 The <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransferitem" id="datatransferitem-4_ix" title='Read about this "DataTransferItem" reference in the full HTML5 spec.'>DataTransferItem</a></code> interface</h5>Each <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransferitem" id="datatransferitem-5_ix" title='Read about this "DataTransferItem" reference in the full HTML5 spec.'>DataTransferItem</a></code> object is associated with a <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer" id="datatransfer-5_ix" title='Read about this "DataTransfer" reference in the full HTML5 spec.'>DataTransfer</a></code> object.<pre class="idl">interface <dfn id="datatransferitem_ix">DataTransferItem</dfn> { readonly attribute DOMString <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitem-kind" title='Read about this "kind" reference in the full HTML5 spec.'>kind</a>; readonly attribute DOMString <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitem-type" title='Read about this "type" reference in the full HTML5 spec.'>type</a>; void <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitem-getasstring" title='Read about this "getAsString" reference in the full HTML5 spec.'>getAsString</a>(in <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#functionstringcallback" id="functionstringcallback-0_ix" title='Read about this "FunctionStringCallback" reference in the full HTML5 spec.'>FunctionStringCallback</a> callback); File <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitem-getasfile" title='Read about this "getAsFile" reference in the full HTML5 spec.'>getAsFile</a>();}; [Callback=FunctionOnly, NoInterfaceObject] interface <dfn id="functionstringcallback_ix">FunctionStringCallback</dfn> { void handleEvent(in DOMString data); };</pre><dl class="domintro"><dt><var title="">item</var> . <code title="dom-DataTransferItem-kind"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitem-kind" title='Read about this "kind" reference in the full HTML5 spec.'>kind</a></code></dt> <dd> Returns <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-drag-data-item-kind" id="the-drag-data-item-kind-1_ix" title='Read about this "the drag data item kind" reference in the full HTML5 spec.'>the drag data item kind</a>, one of: "string", "file". </dd> <dt><var title="">item</var> . <code title="dom-DataTransferItem-type"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitem-type" title='Read about this "type" reference in the full HTML5 spec.'>type</a></code></dt> <dd> Returns <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-drag-data-item-type-string" id="the-drag-data-item-type-string-1_ix" title='Read about this "the drag data item type string" reference in the full HTML5 spec.'>the drag data item type string</a>. </dd> <dt><var title="">item</var> . <code title="dom-DataTransferItem-getAsString"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitem-getasstring" title='Read about this "getAsString" reference in the full HTML5 spec.'>getAsString</a></code>(<var title="">callback</var>)</dt> <dd> Invokes the callback with the string data as the argument, if <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-drag-data-item-kind" id="the-drag-data-item-kind-2_ix" title='Read about this "the drag data item kind" reference in the full HTML5 spec.'>the drag data item kind</a> is Plain Unicode string. </dd> <dt><var title="">file</var> = <var title="">item</var> . <code title="dom-DataTransferItem-getAsFile"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransferitem-getasfile" title='Read about this "getAsFile" reference in the full HTML5 spec.'>getAsFile</a></code>()</dt> <dd> Returns a <code>File</code> object, if <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-drag-data-item-kind" id="the-drag-data-item-kind-3_ix" title='Read about this "the drag data item kind" reference in the full HTML5 spec.'>the drag data item kind</a> is File. </dd> </dl><h4 id="the-dragevent-interface">7.7.4 The <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dragevent" id="dragevent-0_ix" title='Read about this "DragEvent" reference in the full HTML5 spec.'>DragEvent</a></code> interface</h4>The drag-and-drop processing model involves several events. They all use the <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dragevent" id="dragevent-1_ix" title='Read about this "DragEvent" reference in the full HTML5 spec.'>DragEvent</a></code> interface.<pre class="idl">interface <dfn id="dragevent_ix">DragEvent</dfn> : MouseEvent { readonly attribute <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer" id="datatransfer-6_ix" title='Read about this "DataTransfer" reference in the full HTML5 spec.'>DataTransfer</a> <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-dragevent-datatransfer" title='Read about this "dataTransfer" reference in the full HTML5 spec.'>dataTransfer</a>; void <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-dragevent-initdragevent" title='Read about this "initDragEvent" reference in the full HTML5 spec.'>initDragEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dummyArg, in long detailArg, in long screenXArg, in long screenYArg, in long clientXArg, in long clientYArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in unsigned short buttonArg, in EventTarget relatedTargetArg, in <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer" id="datatransfer-7_ix" title='Read about this "DataTransfer" reference in the full HTML5 spec.'>DataTransfer</a> dataTransferArg); };</pre><dl class="domintro"><dt><var title="">event</var> . <code title="dom-DragEvent-dataTransfer"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-dragevent-datatransfer" title='Read about this "dataTransfer" reference in the full HTML5 spec.'>dataTransfer</a></code></dt> <dd> Returns the <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer" id="datatransfer-8_ix" title='Read about this "DataTransfer" reference in the full HTML5 spec.'>DataTransfer</a></code> object for the event. </dd> </dl><h4 id="dndevents">7.7.5 Events summary</h4>This section is non-normative.The following events are involved in the drag-and-drop model.<table><thead><tr><th> Event Name </th> <th> Target </th> <th> Cancelable? </th> <th> <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#drag-data-store-mode" id="drag-data-store-mode-1_ix" title='Read about this "Drag data store mode" reference in the full HTML5 spec.'>Drag data store mode</a> </th> <th> <code title="dom-DataTransfer-dropEffect"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-dropeffect" title='Read about this "dropEffect" reference in the full HTML5 spec.'>dropEffect</a></code> </th> <th> Default Action </th> <tbody><tr><td><dfn id="event-dragstart_ix" title="event-dragstart"><code>dragstart</code></dfn></td> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#source-node" title='Read about this "Source node" reference in the full HTML5 spec.'>Source node</a></td> <td>✓ Cancelable</td> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#concept-dnd-rw" id="concept-dnd-rw-0_ix" title='Read about this "Read/write mode" reference in the full HTML5 spec.'>Read/write mode</a> <td>"<code title="">none</code>"</td> <td>Initiate the drag-and-drop operation</td> <tr><td><dfn id="event-drag_ix" title="event-drag"><code>drag</code></dfn></td> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#source-node" title='Read about this "Source node" reference in the full HTML5 spec.'>Source node</a></td> <td>✓ Cancelable</td> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#concept-dnd-p" id="concept-dnd-p-1_ix" title='Read about this "Protected mode" reference in the full HTML5 spec.'>Protected mode</a> <td>"<code title="">none</code>"</td> <td>Continue the drag-and-drop operation</td> <tr><td><dfn id="event-dragenter_ix" title="event-dragenter"><code>dragenter</code></dfn></td> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#immediate-user-selection" title='Read about this "Immediate user selection" reference in the full HTML5 spec.'>Immediate user selection</a> or <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dom.html#the-body-element" id="the-body-element-7_ix" title='Read about this "the body element" reference in the full HTML5 spec.'>the body element</a></td> <td>✓ Cancelable</td> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#concept-dnd-p" id="concept-dnd-p-2_ix" title='Read about this "Protected mode" reference in the full HTML5 spec.'>Protected mode</a> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dropEffect-initialization" title='Read about this "Based on effectAllowed value" reference in the full HTML5 spec.'>Based on <code>effectAllowed</code> value</a></td> <td>Reject <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#immediate-user-selection" title='Read about this "immediate user selection" reference in the full HTML5 spec.'>immediate user selection</a> as potential <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#current-target-element" title='Read about this "target element" reference in the full HTML5 spec.'>target element</a></td> <tr><td><dfn id="event-dragleave_ix" title="event-dragleave"><code>dragleave</code></dfn></td> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#current-target-element" title='Read about this "Previous target element" reference in the full HTML5 spec.'>Previous target element</a></td> <td>—</td> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#concept-dnd-p" id="concept-dnd-p-3_ix" title='Read about this "Protected mode" reference in the full HTML5 spec.'>Protected mode</a> <td>"<code title="">none</code>"</td> <td>None</td> <tr><td><dfn id="event-dragover_ix" title="event-dragover"><code>dragover</code></dfn></td> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#current-target-element" title='Read about this "Current target element" reference in the full HTML5 spec.'>Current target element</a></td> <td>✓ Cancelable</td> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#concept-dnd-p" id="concept-dnd-p-4_ix" title='Read about this "Protected mode" reference in the full HTML5 spec.'>Protected mode</a> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dropEffect-initialization" title='Read about this "Based on effectAllowed value" reference in the full HTML5 spec.'>Based on <code>effectAllowed</code> value</a></td> <td>Reset the <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#current-drag-operation" title='Read about this "current drag operation" reference in the full HTML5 spec.'>current drag operation</a> to "none"</td> <tr><td><dfn id="event-drop_ix" title="event-drop"><code>drop</code></dfn></td> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#current-target-element" title='Read about this "Current target element" reference in the full HTML5 spec.'>Current target element</a></td> <td>✓ Cancelable</td> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#concept-dnd-ro" id="concept-dnd-ro-0_ix" title='Read about this "Read-only mode" reference in the full HTML5 spec.'>Read-only mode</a> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#current-drag-operation" title='Read about this "Current drag operation" reference in the full HTML5 spec.'>Current drag operation</a></td> <td>Varies</td> <tr><td><dfn id="event-dragend_ix" title="event-dragend"><code>dragend</code></dfn></td> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#source-node" title='Read about this "Source node" reference in the full HTML5 spec.'>Source node</a></td> <td>—</td> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#concept-dnd-p" id="concept-dnd-p-5_ix" title='Read about this "Protected mode" reference in the full HTML5 spec.'>Protected mode</a> <td><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#current-drag-operation" title='Read about this "Current drag operation" reference in the full HTML5 spec.'>Current drag operation</a></td> <td>Varies</td> </table>Not shown in the above table: all these events bubble, and the <code title="dom-DataTransfer-effectAllowed"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-effectallowed" title='Read about this "effectAllowed" reference in the full HTML5 spec.'>effectAllowed</a></code> attribute always has the value it had after the previous event was fired, defaulting to "<code title="">uninitialized</code>" in the <code title="event-dragstart"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#event-dragstart" id="dragstart-2_ix" title='Read about this "dragstart" reference in the full HTML5 spec.'>dragstart</a></code> event.<h4 id="the-draggable-attribute_ix">7.7.6 The <dfn title="attr-draggable"><code>draggable</code></dfn> attribute</h4>All <a class="full-spec-link" href="http://dev.w3.org/html5/spec/infrastructure.html#html-elements" id="html-elements-36_ix" title='Read about this "HTML elements" reference in the full HTML5 spec.'>HTML elements</a> may have the <code title="attr-draggable"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-draggable-attribute" id="draggable-1_ix" title='Read about this "draggable" reference in the full HTML5 spec.'>draggable</a></code> content attribute set. The <code title="attr-draggable"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-draggable-attribute" id="draggable-2_ix" title='Read about this "draggable" reference in the full HTML5 spec.'>draggable</a></code> attribute is an <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-microsyntaxes.html#enumerated-attribute" id="enumerated-attribute-18_ix" title='Read about this "enumerated attribute" reference in the full HTML5 spec.'>enumerated attribute</a>. It has three states. The first state is true and it has the keyword <code title="">true</code>. The second state is false and it has the keyword <code title="">false</code>. The third state is auto; it has no keywords but it is the missing value default.The true state means the element is draggable; the false state means that it is not. The auto state uses the default behavior of the user agent.<dl class="domintro"><dt><var title="">element</var> . <code title="dom-draggable"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-draggable" title='Read about this "draggable" reference in the full HTML5 spec.'>draggable</a></code> [ = <var title="">value</var> ]</dt> <dd> Returns true if the element is draggable; otherwise, returns false. Can be set, to override the default and set the <code title="attr-draggable"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-draggable-attribute" id="draggable-3_ix" title='Read about this "draggable" reference in the full HTML5 spec.'>draggable</a></code> content attribute. </dd> </dl><h4 id="the-dropzone-attribute_ix">7.7.7 The <dfn title="attr-dropzone"><code>dropzone</code></dfn> attribute</h4>All <a class="full-spec-link" href="http://dev.w3.org/html5/spec/infrastructure.html#html-elements" id="html-elements-37_ix" title='Read about this "HTML elements" reference in the full HTML5 spec.'>HTML elements</a> may have the <code title="attr-dropzone"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-dropzone-attribute" id="dropzone-4_ix" title='Read about this "dropzone" reference in the full HTML5 spec.'>dropzone</a></code> content attribute set. When specified, its value must be an <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens" id="unordered-set-of-unique-space-separated-tokens-4_ix" title='Read about this "unordered set of unique space-separated tokens" reference in the full HTML5 spec.'>unordered set of unique space-separated tokens</a> that are <a class="full-spec-link" href="http://dev.w3.org/html5/spec/infrastructure.html#ascii-case-insensitive" id="ascii-case-insensitive-21_ix" title='Read about this "ASCII case-insensitive" reference in the full HTML5 spec.'>ASCII case-insensitive</a>. The allowed values are the following:<dl><dt><dfn id="attr-dropzone-copy_ix" title="attr-dropzone-copy"><code>copy</code></dfn></dt> <dd>Indicates that dropping an accepted item on the element will result in a copy of the dragged data. <dt><dfn id="attr-dropzone-move_ix" title="attr-dropzone-move"><code>move</code></dfn></dt> <dd>Indicates that dropping an accepted item on the element will result in the dragged data being moved to the new location. <dt><dfn id="attr-dropzone-link_ix" title="attr-dropzone-link"><code>link</code></dfn></dt> <dd>Indicates that dropping an accepted item on the element will result in a link to the original data. <dt>Any keyword with three characters or more, beginning with the two characters U+0073 LATIN SMALL LETTER S and U+003A COLON or U+0053 LATIN CAPITAL LETTER S and U+003A COLON (i.e. an <a class="full-spec-link" href="http://dev.w3.org/html5/spec/infrastructure.html#ascii-case-insensitive" id="ascii-case-insensitive-22_ix" title='Read about this "ASCII case-insensitive" reference in the full HTML5 spec.'>ASCII case-insensitive</a> match for the string "<code title="">s:</code>")<dt> </dt><dd>Indicates that items with <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-drag-data-item-kind" id="the-drag-data-item-kind-4_ix" title='Read about this "the drag data item kind" reference in the full HTML5 spec.'>the drag data item kind</a> Plain Unicode string and <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-drag-data-item-type-string" id="the-drag-data-item-type-string-2_ix" title='Read about this "the drag data item type string" reference in the full HTML5 spec.'>the drag data item type string</a> set to a value that matches the remainder of the keyword are accepted.</dd> <dt>Any keyword with three characters or more, beginning with the two characters U+0066 LATIN SMALL LETTER F and U+003A COLON or U+0046 LATIN CAPITAL LETTER F and U+003A COLON (i.e. an <a class="full-spec-link" href="http://dev.w3.org/html5/spec/infrastructure.html#ascii-case-insensitive" id="ascii-case-insensitive-23_ix" title='Read about this "ASCII case-insensitive" reference in the full HTML5 spec.'>ASCII case-insensitive</a> match for the string "<code title="">f:</code>")<dt> </dt><dd>Indicates that items with <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-drag-data-item-kind" id="the-drag-data-item-kind-5_ix" title='Read about this "the drag data item kind" reference in the full HTML5 spec.'>the drag data item kind</a> File and <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-drag-data-item-type-string" id="the-drag-data-item-type-string-3_ix" title='Read about this "the drag data item type string" reference in the full HTML5 spec.'>the drag data item type string</a> set to a value that matches the remainder of the keyword are accepted.</dd> </dl>The <code title="attr-dropzone"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-dropzone-attribute" id="dropzone-5_ix" title='Read about this "dropzone" reference in the full HTML5 spec.'>dropzone</a></code> content attribute's values must not have more than one of the three feedback values (<code title="attr-dropzone-copy"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#attr-dropzone-copy" id="copy_ix" title='Read about this "copy" reference in the full HTML5 spec.'>copy</a></code>, <code title="attr-dropzone-move"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#attr-dropzone-move" id="move_ix" title='Read about this "move" reference in the full HTML5 spec.'>move</a></code>, and <code title="attr-dropzone-link"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#attr-dropzone-link" id="link-64_ix" title='Read about this "link" reference in the full HTML5 spec.'>link</a></code>) specified. If none are specified, the <code title="attr-dropzone-copy"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#attr-dropzone-copy" id="copy-0_ix" title='Read about this "copy" reference in the full HTML5 spec.'>copy</a></code> value is implied.<div class="example"> In this example, a <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/grouping-content.html#the-div-element" id="div-16_ix" title='Read about this "div" reference in the full HTML5 spec.'>div</a></code> element is made into a drop target for image files using the <code title="attr-dropzone"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#the-dropzone-attribute" id="dropzone-6_ix" title='Read about this "dropzone" reference in the full HTML5 spec.'>dropzone</a></code> attribute. Images dropped into the target are then displayed. <pre><div dropzone="copy f:image/png f:image/gif f:image/jpeg" ondrop="receive(event, this)"> <p>Drop an image here to have it displayed. </div> <script> function receive(event, element) { var data = event.dataTransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { var img = new Image(); img.src = window.createObjectURL(data[i].getAsFile()); element.appendChild(img); } } } </script></pre> </div><h3 id="editing-apis">7.8 Editing APIs</h3><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-execCommand"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#execCommand" title='Read about this "execCommand" reference in the full HTML5 spec.'>execCommand</a></code>(<var title="">commandId</var> [, <var title="">showUI</var> [, <var title="">value</var> ] ] )</dt> <dd> Runs the action specified by the first argument, as described in the list below. The second and third arguments sometimes affect the action. (If they don't they are ignored.) </dd> <dt><var title="">document</var> . <code title="dom-document-queryCommandEnabled"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-document-querycommandenabled" title='Read about this "queryCommandEnabled" reference in the full HTML5 spec.'>queryCommandEnabled</a></code>(<var title="">commandId</var>)</dt> <dd> Returns whether the given command is enabled, as described in the list below. </dd> <dt><var title="">document</var> . <code title="dom-document-queryCommandIndeterm"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-document-querycommandindeterm" title='Read about this "queryCommandIndeterm" reference in the full HTML5 spec.'>queryCommandIndeterm</a></code>(<var title="">commandId</var>)</dt> <dd> Returns whether the given command is indeterminate, as described in the list below. </dd> <dt><var title="">document</var> . <code title="dom-document-queryCommandState"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-document-querycommandstate" title='Read about this "queryCommandState" reference in the full HTML5 spec.'>queryCommandState</a></code>(<var title="">commandId</var>)</dt> <dd> Returns the state of the command, as described in the list below. </dd> <dt><var title="">document</var> . <code title="dom-document-queryCommandSupported"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-document-querycommandsupported" title='Read about this "queryCommandSupported" reference in the full HTML5 spec.'>queryCommandSupported</a></code>(<var title="">commandId</var>)</dt> <dd> Returns true if the command is supported; otherwise, returns false. </dd> <dt><var title="">document</var> . <code title="dom-document-queryCommandValue"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#dom-document-querycommandvalue" title='Read about this "queryCommandValue" reference in the full HTML5 spec.'>queryCommandValue</a></code>(<var title="">commandId</var>)</dt> <dd> Returns the value of the command, as described in the list below. </dd> </dl>A document is <dfn id="ready-for-editing-host-commands_ix">ready for editing host commands</dfn> if it has a selection that is entirely within an <a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#editing-host" title='Read about this "editing host" reference in the full HTML5 spec.'>editing host</a>, or if it has no selection but its caret is inside an <a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#editing-host" title='Read about this "editing host" reference in the full HTML5 spec.'>editing host</a>.The possible values for <var title="">commandId</var>, and their corresponding meanings, are as follows. <dl><dt><dfn id="command-bold_ix" title="command-bold"><code>bold</code></dfn></dt> <dd>Summary: Toggles whether the selection is bold.</dd> <dd>Enabled When: The document is <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#ready-for-editing-host-commands" id="ready-for-editing-host-commands-0_ix" title='Read about this "ready for editing host commands" reference in the full HTML5 spec.'>ready for editing host commands</a>.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: True if the selection, or the caret, if there is no selection, is, or is contained within, a <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-b-element" id="b-16_ix" title='Read about this "b" reference in the full HTML5 spec.'>b</a></code> element. False otherwise.</dd> <dd>Value: The string "<code title="">true</code>" if the expression given for the "State" above is true, the string "<code title="">false</code>" otherwise.</dd> <dt><dfn id="command-createlink_ix" title="command-createLink"><code>createLink</code></dfn></dt> <dd>Summary: Toggles whether the selection is a link or not. If the second argument is true, and a link is to be added, the user agent will ask the user for the address. Otherwise, the third argument will be used as the address.</dd> <dd>Enabled When: The document is <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#ready-for-editing-host-commands" id="ready-for-editing-host-commands-1_ix" title='Read about this "ready for editing host commands" reference in the full HTML5 spec.'>ready for editing host commands</a>.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: Always false.</dd> <dd>Value: Always the string "<code title="">false</code>".</dd> <dt><dfn id="command-delete_ix" title="command-delete"><code>delete</code></dfn></dt> <dd>Summary: Deletes the selection or the character before the cursor.</dd> <dd>Enabled When: The document is <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#ready-for-editing-host-commands" id="ready-for-editing-host-commands-2_ix" title='Read about this "ready for editing host commands" reference in the full HTML5 spec.'>ready for editing host commands</a>.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: Always false.</dd> <dd>Value: Always the string "<code title="">false</code>".</dd> <dt><dfn id="command-formatblock_ix" title="command-formatBlock"><code>formatBlock</code></dfn></dt> <dd>Summary: Wraps the selection in the element given by the third argument. If the third argument doesn't specify an element that is a <dfn id="formatblock-candidate_ix"><code title="">formatBlock</code> candidate</dfn>, does nothing.</dd> <dd>Enabled When: The document is <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#ready-for-editing-host-commands" id="ready-for-editing-host-commands-3_ix" title='Read about this "ready for editing host commands" reference in the full HTML5 spec.'>ready for editing host commands</a>.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: Always false.</dd> <dd>Value: Always the string "<code title="">false</code>".</dd> <dt><dfn id="command-forwarddelete_ix" title="command-forwardDelete"><code>forwardDelete</code></dfn></dt> <dd>Summary: Deletes the selection or the character after the cursor.</dd> <dd>Enabled When: The document is <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#ready-for-editing-host-commands" id="ready-for-editing-host-commands-4_ix" title='Read about this "ready for editing host commands" reference in the full HTML5 spec.'>ready for editing host commands</a>.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: Always false.</dd> <dd>Value: Always the string "<code title="">false</code>".</dd> <dt><dfn id="command-insertimage_ix" title="command-insertImage"><code>insertImage</code></dfn></dt> <dd>Summary: Toggles whether the selection is an image or not. If the second argument is true, and an image is to be added, the user agent will ask the user for the address. Otherwise, the third argument will be used as the address.</dd> <dd>Enabled When: The document is <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#ready-for-editing-host-commands" id="ready-for-editing-host-commands-5_ix" title='Read about this "ready for editing host commands" reference in the full HTML5 spec.'>ready for editing host commands</a>.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: Always false.</dd> <dd>Value: Always the string "<code title="">false</code>".</dd> <dt><dfn id="command-inserthtml_ix" title="command-insertHTML"><code>insertHTML</code></dfn></dt> <dd>Summary: Replaces the selection with the value of the third argument parsed as HTML.</dd> <dd>Enabled When: The document is <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#ready-for-editing-host-commands" id="ready-for-editing-host-commands-6_ix" title='Read about this "ready for editing host commands" reference in the full HTML5 spec.'>ready for editing host commands</a>.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: Always false.</dd> <dd>Value: Always the string "<code title="">false</code>".</dd> <dt><dfn id="command-insertlinebreak_ix" title="command-insertLineBreak"><code>insertLineBreak</code></dfn></dt> <dd>Summary: Inserts a line break.</dd> <dd>Enabled When: The document is <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#ready-for-editing-host-commands" id="ready-for-editing-host-commands-7_ix" title='Read about this "ready for editing host commands" reference in the full HTML5 spec.'>ready for editing host commands</a>.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: Always false.</dd> <dd>Value: Always the string "<code title="">false</code>".</dd> <dt><dfn id="command-insertorderedlist_ix" title="command-insertOrderedList"><code>insertOrderedList</code></dfn></dt> <dd>Summary: Toggles whether the selection is an ordered list.</dd> <dd>Enabled When: The document is <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#ready-for-editing-host-commands" id="ready-for-editing-host-commands-8_ix" title='Read about this "ready for editing host commands" reference in the full HTML5 spec.'>ready for editing host commands</a>.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: Always false.</dd> <dd>Value: Always the string "<code title="">false</code>".</dd> <dt><dfn id="command-insertunorderedlist_ix" title="command-insertUnorderedList"><code>insertUnorderedList</code></dfn></dt> <dd>Summary: Toggles whether the selection is an unordered list.</dd> <dd>Enabled When: The document is <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#ready-for-editing-host-commands" id="ready-for-editing-host-commands-9_ix" title='Read about this "ready for editing host commands" reference in the full HTML5 spec.'>ready for editing host commands</a>.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: Always false.</dd> <dd>Value: Always the string "<code title="">false</code>".</dd> <dt><dfn id="command-insertparagraph_ix" title="command-insertParagraph"><code>insertParagraph</code></dfn></dt> <dd>Summary: Inserts a paragraph break.</dd> <dd>Enabled When: The document is <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#ready-for-editing-host-commands" id="ready-for-editing-host-commands-10_ix" title='Read about this "ready for editing host commands" reference in the full HTML5 spec.'>ready for editing host commands</a>.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: Always false.</dd> <dd>Value: Always the string "<code title="">false</code>".</dd> <dt><dfn id="command-inserttext_ix" title="command-insertText"><code>insertText</code></dfn></dt> <dd>Summary: Inserts the text given in the third parameter.</dd> <dd>Enabled When: The document is <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#ready-for-editing-host-commands" id="ready-for-editing-host-commands-11_ix" title='Read about this "ready for editing host commands" reference in the full HTML5 spec.'>ready for editing host commands</a>.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: Always false.</dd> <dd>Value: Always the string "<code title="">false</code>".</dd> <dt><dfn id="command-italic_ix" title="command-italic"><code>italic</code></dfn></dt> <dd>Summary: Toggles whether the selection is italic.</dd> <dd>Enabled When: The document is <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#ready-for-editing-host-commands" id="ready-for-editing-host-commands-12_ix" title='Read about this "ready for editing host commands" reference in the full HTML5 spec.'>ready for editing host commands</a>.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: True if the selection, or the caret, if there is no selection, is, or is contained within, a <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-i-element" id="i-25_ix" title='Read about this "i" reference in the full HTML5 spec.'>i</a></code> element. False otherwise.</dd> <dd>Value: The string "<code title="">true</code>" if the expression given for the "State" above is true, the string "<code title="">false</code>" otherwise.</dd> <dt><dfn id="command-redo_ix" title="command-redo"><code>redo</code></dfn></dt> <dd>Summary: Acts as if the user had requested a redo.</dd> <dd>Enabled When: The undo position is not at the end of the undo transaction history.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: Always false.</dd> <dd>Value: Always the string "<code title="">false</code>".</dd> <dt><dfn id="command-selectall_ix" title="command-selectAll"><code>selectAll</code></dfn></dt> <dd>Summary: Selects all the editable content.</dd> <dd>Enabled When: Always.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: Always false.</dd> <dd>Value: Always the string "<code title="">false</code>".</dd> <dt><dfn id="command-subscript_ix" title="command-subscript"><code>subscript</code></dfn></dt> <dd>Summary: Toggles whether the selection is subscripted.</dd> <dd>Enabled When: The document is <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#ready-for-editing-host-commands" id="ready-for-editing-host-commands-13_ix" title='Read about this "ready for editing host commands" reference in the full HTML5 spec.'>ready for editing host commands</a>.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: True if the selection, or the caret, if there is no selection, is, or is contained within, a <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-sub-and-sup-elements" id="sub-7_ix" title='Read about this "sub" reference in the full HTML5 spec.'>sub</a></code> element. False otherwise.</dd> <dd>Value: The string "<code title="">true</code>" if the expression given for the "State" above is true, the string "<code title="">false</code>" otherwise.</dd> <dt><dfn id="command-superscript_ix" title="command-superscript"><code>superscript</code></dfn></dt> <dd>Summary: Toggles whether the selection is superscripted.</dd> <dd>Enabled When: The document is <a class="full-spec-link" href="http://dev.w3.org/html5/spec/dnd.html#ready-for-editing-host-commands" id="ready-for-editing-host-commands-14_ix" title='Read about this "ready for editing host commands" reference in the full HTML5 spec.'>ready for editing host commands</a>.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: True if the selection, or the caret, if there is no selection, is, or is contained within, a <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-sub-and-sup-elements" id="sup-5_ix" title='Read about this "sup" reference in the full HTML5 spec.'>sup</a></code> element. False otherwise.</dd> <dd>Value: The string "<code title="">true</code>" if the expression given for the "State" above is true, the string "<code title="">false</code>" otherwise.</dd> <dt><dfn id="command-undo_ix" title="command-undo"><code>undo</code></dfn></dt> <dd>Summary: Acts as if the user had requested an undo.</dd> <dd>Enabled When: The undo position is not at the start of the undo transaction history.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: Always false.</dd> <dd>Value: Always the string "<code title="">false</code>".</dd> <dt><dfn id="command-unlink_ix" title="command-unlink"><code>unlink</code></dfn></dt> <dd>Summary: Removes all links from the selection.</dd> <dd>Enabled When: The document has a selection that is entirely within an <a class="full-spec-link" href="http://dev.w3.org/html5/spec/editing.html#editing-host" title='Read about this "editing host" reference in the full HTML5 spec.'>editing host</a> and that contains (either partially or completely) at least one <code><a class="full-spec-link" href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-a-element" id="a-57_ix" title='Read about this "a" reference in the full HTML5 spec.'>a</a></code> element that has an <code title="attr-hyperlink-href"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/links.html#attr-hyperlink-href" id="href-25_ix" title='Read about this "href" reference in the full HTML5 spec.'>href</a></code> attribute.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: Always false.</dd> <dd>Value: Always the string "<code title="">false</code>".</dd> <dt><dfn id="command-unselect_ix" title="command-unselect"><code>unselect</code></dfn></dt> <dd>Summary: Unselects everything.</dd> <dd>Enabled When: Always.</dd> <dd>Indeterminate When: Never.</dd> <dd>State: Always false.</dd> <dd>Value: Always the string "<code title="">false</code>".</dd> </dl>