차례
  1. 7 사용자 인터랙션
    1. 7.1 hidden 속성
    2. 7.2 활성화
    3. 7.3 포커스
      1. 7.3.1 순서있는 포커스 이동과 tabindex 속성
      2. 7.3.2 포커스 관리
      3. 7.3.3 문서 레벨의 포커스 API
      4. 7.3.4 요소 레벨의 포커스 API
    4. 7.4 키보드 단축키 할당
      1. 7.4.1 소개
      2. 7.4.2 accesskey 속성
      3. 7.4.3 처리 모델
    5. 7.5 contenteditable 속성
      1. 7.5.1 사용자의 편집 동작
      2. 7.5.2 문서 전체를 편집 가능하도록 만들기
    6. 7.6 철자와 문법 체크

7 사용자 인터랙션

7.1 hidden 속성

모든 HTML 요소는 내용 속성 hidden을 가질 수 있습니다. 속성은 불리언 속성입니다. 요소에서 명시되었을 때, 속성은 이 요소가 아직, 또는 더이상은, 관련이 없음을 나타냅니다. 사용자 에이전트는 hidden속성이 사용된 요소를 렌더링하지 말아야 합니다.

All HTML elements may have the hidden content attribute set. The hidden attribute is a boolean attribute. When specified on an element, it indicates that the element is not yet, or is no longer, relevant. User agents should not render elements that have the hidden attribute specified.

다음의 간단한 예제에서, 속성은 사용자가 로그인하기 전까지는 웹 게임의 메인 스크린을 감추려는 목적으로 사용되었습니다.

In the following skeletal example, the attribute is used to hide the Web game's main screen until the user logs in:

  <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>

다른 표현에서는 정당하게 보여질 수 있는 내용을 감추려는 목적으로 hidden속성을 사용해서는 안됩니다. 예를 들어, 탭 형태의 대화상자에서 패널을 감추기 위해 hidden속성을 사용하는 것은 올바르지 않은 것인데, 탭 인터페이스는 단순히 오버플로우 표현의 한 종류이기 때문입니다 - 충분히 큰 페이지에서는 스크롤바를 사용하고 모든 폼 컨트롤들을 다 보여주어도 무방한 것입니다. 이와 흡사하게, 특정한 표현에서만 내용을 숨기기 위해서 속성을 사용하는 것 역시 잘못된 것입니다 - 무언가가 hidden으로 마크업되었다면, 그것은 모든 표현들, 예를 들어, 스크린 리더를 포함해서, 에서 감춰지는 것입니다.

The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden 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 hidden, it is hidden from all presentations, including, for instance, screen readers.

hidden속성을 갖지 않는 요소는 hidden속성을 가진 요소를 참조하거나 링크해서는 안됩니다.

Elements that are not hidden should not link to or refer to elements that are hidden.

예를 들어, hidden속성으로 표시된 섹션에 링크를 걸기 위해 href속성을 사용하는 것은 정확하지 않은 것입니다. 적용할 수 없는 내용이거나 관련이 없는 내용이라면, 거기에 링크할 이유가 없습니다.

For example, it would be incorrect to use the href attribute to link to a section marked with the hidden attribute. If the content is not applicable or relevant, then there is no reason to link to it.

hidden속성을 가진 설명들을 참조하기 위해 ARIA 속성 aria-describedby을 사용하는 것 역시, 비슷한 이유에서 올바르지 않습니다. 섹션을 숨기는 것은, 그것이 이 시점에서 누구에게도 적용할 수 없거나 관련이 없다는 의미이며, 따라서 그러한 것은 사용자가 상호작용할 수 있는 올바른 설명이 될 수 없음이 명백합니다.

It would similarly be incorrect to use the ARIA aria-describedby attribute to refer to descriptions that are themselves hidden. 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.

hidden속성으로 감추어진 섹션의 요소들은 여전히 활성입니다 - 예를 들어, 그러한 섹션에 포함된 스크립트나 폼 컨트롤들은 여전히 실행되고, 제출되어집니다. 사용자에게 나타나는 표현만이 변합니다.

Elements in a section hidden by the hidden 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.

The hidden IDL attribute must reflect the content attribute of the same name.

7.2 활성화

element . click()

요소가 클릭된것처럼 행동합니다.

Acts as if the element was clicked.

Each element has a click in progress flag, initially set to false.

The click() method must run these steps:

  1. If the element's click in progress flag is set to true, then abort these steps.

  2. Set the click in progress flag on the element to true.

  3. If the element has a defined activation behavior, run synthetic click activation steps on the element. Otherwise, fire a click event at the element.

  4. Set the click in progress flag on the element to false.

7.3 포커스

When an element is focused, key events received by the document must be targeted at that element. There may be no element focused; when no element is focused, key events received by the document must be targeted at the body element.

User agents may track focus for each browsing context or Document individually, or may support only one focused element per top-level browsing context — user agents should follow platform conventions in this regard.

Which elements within a top-level browsing context currently have focus must be independent of whether or not the top-level browsing context itself has the system focus.

When an element is focused, the element matches the CSS :focus pseudo-class.

7.3.1 순서있는 포커스 이동과 tabindex 속성

내용 속성 tabindex는 요소가 포커스를 가질 수 있는지, 순서 있는 포커스 내비게이션을 통해 접근할 수 있는지, 그리고 그러한 내비게이션에서의 상대적 순서를 명시합니다. "tab index" 라는 이름은 그러한 내비게이션에서 보통 탭 키를 이용하는 것에서 유래한 것입니다. 탭 전진tabbing이라는 단어는 그러한 내비게이션을 통해 도달할 수 있는, 포커스를 가질 수 있는 요소들에서 앞으로 이동하는 것을 말합니다.

The tabindex 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.

tabindex속성을 사용했다면 그 값은 유효한 정수여야 합니다.

The tabindex attribute, if specified, must have a value that is a valid integer.

If the attribute is specified, it must be parsed using the rules for parsing integers. The attribute's values have the following meanings:

If the attribute is omitted or parsing the value returns an error

The user agent should follow platform conventions to determine if the element is to be focusable and, if so, whether the element can be reached using sequential focus navigation, and if so, what its relative order should be.

If the value is a negative integer

The user agent must allow the element to be focused, but should not allow the element to be reached using sequential focus navigation.

If the value is a zero

The user agent must allow the element to be focused, should allow the element to be reached using sequential focus navigation, and should follow platform conventions to determine the element's relative order.

If the value is greater than zero

The user agent must allow the element to be focused, should allow the element to be reached using sequential focus navigation, and should place the element in the sequential focus navigation order so that it is:

  • before any focusable element whose tabindex attribute has been omitted or whose value, when parsed, returns an error,
  • before any focusable element whose tabindex attribute has a value equal to or less than zero,
  • after any element whose tabindex attribute has a value greater than zero but less than the value of the tabindex attribute on the element,
  • after any element whose tabindex attribute has a value equal to the value of the tabindex attribute on the element but that is earlier in the document in tree order than the element,
  • before any element whose tabindex attribute has a value equal to the value of the tabindex attribute on the element but that is later in the document in tree order than the element, and
  • before any element whose tabindex attribute has a value greater than the value of the tabindex attribute on the element.

An element is specially focusable if the tabindex attribute's definition above defines the element to be focusable.

An element that is specially focusable but does not otherwise have an activation behavior defined has an activation behavior that does nothing.

This means that an element that is only focusable because of its tabindex attribute will fire a click event in response to a non-mouse activation (e.g. hitting the "enter" key while the element is focused).

The tabIndex IDL attribute must reflect the value of the tabindex content attribute. Its default value is 0 for elements that are focusable and −1 for elements that are not focusable.

7.3.2 포커스 관리

An element is focusable if the user agent's default behavior allows it to be focusable or if the element is specially focusable, but only if the element is either being rendered or is a descendant of a canvas element that represents embedded content.

User agents should make the following elements focusable, unless platform conventions dictate otherwise:

In addition, each shape that is generated for an area element should be focusable, unless platform conventions dictate otherwise. (A single area element can correspond to multiple shapes, since image maps can be reused with multiple images on a page.)

The user agent may also make part of a details element's rendering focusable, to enable the element to be opened or closed using keyboard input. However, this is distinct from the details or summary element being focusable.


The focusing steps are as follows:

  1. If the element is not in a Document, or if the element's Document has no browsing context, or if the element's Document' browsing context has no top-level browsing context, then abort these steps.

  2. If focusing the element will remove the focus from another element, then run the unfocusing steps for that element.

  3. Make the element the currently focused element in its top-level browsing context.

    Some elements, most notably area, can correspond to more than one distinct focusable area. If a particular area was indicated when the element was focused, then that is the area that must get focus; otherwise, e.g. when using the focus() method, the first such region in tree order is the one that must be focused.

  4. Fire a simple event named focus at the element.

User agents must synchronously run the focusing steps for an element whenever the user moves the focus to a focusable element.

The unfocusing steps are as follows:

  1. If the element is an input element, and the change event applies to the element, and the element does not have a defined activation behavior, and the user has changed the element's value or its list of selected files while the control was focused without committing that change, then fire a simple event that bubbles named change at the element, then broadcast formchange events at the element's form owner.

  2. Unfocus the element.

  3. Fire a simple event named blur at the element.

When an element that is focused stops being a focusable element, or stops being focused without another element being explicitly focused in its stead, the user agent should synchronously run the focusing steps for the body element, if there is one; if there is not, then the user agent should synchronously run the unfocusing steps for the affected element only.

For example, this might happen because the element is removed from its Document, or has a hidden attribute added. It would also happen to an input element when the element gets disabled.

7.3.3 문서 레벨의 포커스 API

document . activeElement

현재 포커스를 가진 요소를 반환합니다.

Returns the currently focused element.

document . hasFocus()

문서가 포커스를 갖고 있다면 true를, 아니라면 false를 반환합니다.

Returns true if the document has focus; otherwise, returns false.

window . focus()

윈도우에 포커스를 줍니다. 이 메서드의 사용은 권장하지 않습니다. 사용자가 윈도우 포커스를 직접 조절할 수 있도록 하십시오.

Focuses the window. Use of this method is discouraged. Allow the user to control window focus instead.

window . blur()

윈도우의 포커스를 해제합니다. 이 메서드의 사용은 권장하지 않습니다. 사용자가 윈도우 포커스를 직접 조절할 수 있도록 하십시오.

Unfocuses the window. Use of this method is discouraged. Allow the user to control window focus instead.

The activeElement attribute on HTMLDocument objects must return the element in the document that is focused. If no element in the Document is focused, this must return the body element.

The hasFocus() method on HTMLDocument objects must return true if the Document's browsing context is focused, and all its ancestor browsing contexts are also focused, and the top-level browsing context has the system focus. If the Document has no browsing context or if its browsing context has no top-level browsing context, then the method will always return false.

The focus() method on the Window object, when invoked, provides a hint to the user agent that the script believes the user might be interested in the contents of the browsing context of the Window object on which the method was invoked.

User agents are encouraged to have this focus() method trigger some kind of notification.

The blur() method on the Window object, when invoked, provides a hint to the user agent that the script believes the user probably is not currently interested in the contents of the browsing context of the Window object on which the method was invoked, but that the contents might become interesting again in the future.

User agents are encouraged to ignore calls to this blur() method entirely.

Historically the focus() and blur() methods actually affected the system focus, but hostile sites widely abuse this behavior to the user's detriment.

7.3.4 요소 레벨의 포커스 API

element . focus()

요소에 포커스를 줍니다.

Focuses the element.

element . blur()

요소의 포커스를 해제합니다. 이 메서드의 사용은 권장하지 않습니다. 사용자가 요소의 포커스를 직접 조절할 수 있도록 하십시오.

Unfocuses the element. Use of this method is discouraged. Focus another element instead.

포커스 표식이 보기 싫다고 해서 그것을 감추려는 용도로 이 메서드를 사용하지 마십시오. 대신, 'outline' 속성을 덮어쓰도록 CSS 규칙을 사용하십시오. 역주

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.

예를 들어, 링크의 아웃라인을 감추려면, 이렇게 할 수 있습니다:

For example, to hide the outline from links, you could use:

:link:focus, :visited:focus { outline: none; }

The focus() method, when invoked, must run the following algorithm:

  1. If the element is marked as locked for focus, then abort these steps.

  2. If the element is not focusable, then abort these steps.

  3. Mark the element as locked for focus.

  4. If the element is not already focused, run the focusing steps for the element.

  5. Unmark the element as locked for focus.

The blur() method, when invoked, should run the focusing steps for the body element, if there is one; if there is not, then it should run the unfocusing steps for the element on which the method was called instead. User agents may selectively or uniformly ignore calls to this method for usability reasons.

For example, if the blur() method is unwisely being used to remove the focus ring for aesthetics reasons, the page would become unusable by keyboard users. Ignoring calls to this method would thus allow keyboard users to interact with the page.

7.4 키보드 단축키 할당

7.4.1 소개

This section is non-normative.

활성화되거나 포커스를 가질 수 있는 요소들은, accesskey속성을 통해 자신을 활성화시키는 하나의 키 조합을 가질 수 있습니다.

Each element that can be activated or focused can be assigned a single key combination to activate it, using the accesskey attribute.

정확한 단축키는 사용자 에이전트에 의해 결정되는데, 이러한 것을 결정하는 근거 중에는 사용자의 키보드, 플랫폼(운영체제)에서 이미 사용중인 단축키, 페이지에서 명시되어 있는 단축키 등이 포함됩니다. 이러한 것을 고려한 후 accesskey속성에 제공된 정보를 가이드로 삼아 결정합니다.

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 accesskey attribute as a guide.

다양한 종류의 입력 장치에서 연관된 단축키를 사용할 수 있도록 하기 위해, 저자는 몇가지 종류의 대체들을 accesskey속성에서 제공할 수 있습니다.

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 accesskey attribute.

각각의 대체들은 하나의 문자, 즉 글자나 숫자로 구성됩니다.

Each alternative consists of a single character, such as a letter or digit.

사용자 에이전트가 이러한 키보드 단축키를 사용자에게 알려줄 수 있지만, 저자들 역시 직접 이것을 알려주기를 권합니다. IDL 속성 accessKeyLabel는 사용자 에이전트에서 할당한 실제 키 조합을 나타내는 문자열을 반환합니다.

User agents can provide users with a list of the keyboard shortcuts, but authors are encouraged to do so also. The accessKeyLabel IDL attribute returns a string representing the actual key combination assigned by the user agent.

7.4.2 accesskey 속성

모든 HTML 요소는 내용 속성 accesskey를 가질 수 있습니다. 속성의 값은 사용자 에이전트에 의해 요소를 활성화시키거나 포커스를 갖게끔 하는 단축키를 생성하는 가이드로 사용됩니다.

All HTML elements may have the accesskey content attribute set. The accesskey attribute's value is used by the user agent as a guide for creating a keyboard shortcut that activates or focuses the element.

명시되었다면, 값은 공백문자로 구분된 토큰의 순서 있는 목록이어야 하며, 각각의 토큰의 길이는 유니코드 1 포인트여야 합니다.

If specified, the value must be an ordered set of unique space-separated tokens that are case-sensitive, each of which must be exactly one Unicode code point in length.

다양한 링크들에 억세스키가 주어져 있으므로, 사이트에 친숙한 키보드 사용자는 관련있는 페이지로 더 빠르게 이동할 수 있습니다:

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:

<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>

검색 필드에 두개의 억세스키 "s", "0"를(그 순서대로) 사용할 수 있습니다. 키보드 기능을 온전하게 사용하는 사용자 에이전트에서는 단축키로 Ctrl+Alt+S를 사용할 수 있을 것입니다. 또한 숫자패드만을 사용하는 작은 장치에서는 단순한 0 키를 사용할 수 있을 것입니다.

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 Ctrl+Alt+S as the shortcut key, while a user agent on a small device with just a numeric keypad might pick just the plain unadorned key 0:

<form action="/search">
 <label>Search: <input type="search" name="q" accesskey="s 0"></label>
 <input type="submit">
</form>

다음의 예제에서는, 버튼에 사용할 수 있는 억세스키가 설명되어져 있습니다. 그리고, 스크립트에서 버튼의 레이블을 업데이트해서 사용자 에이전트가 선택한 키 조합을 드러내려는 시도를 하고 있습니다.

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.

<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>

어떤 사용자 에이전트에서는, 버튼의 레이블이 "Compose (⌘N)" 처럼 보일 것입니다. 다른 것에서는 "Compose (Alt+⇧+1)" 이렇게 보일 수도 있습니다. 사용자 에이전트가 키를 할당하지 않는다면, "Compose"로 보일 것입니다. 정확한 문자열은 할당된 억세스키에 따라 달라지며, 또한 사용자 에이전트가 키 조합을 어떻게 나타내는지에 따라 달라집니다.

On one user agent, the button's label might become "Compose (⌘N)". On another, it might become "Compose (Alt+⇧+1)". If the user agent doesn't assign a key, it will be just "Compose". The exact string depends on what the assigned access key is, and on how the user agent represents that key combination.

7.4.3 처리 모델

An element's assigned access key is a key combination derived from the element's accesskey content attribute as follows:

  1. If the element has no accesskey attribute, then skip to the fallback step below.

  2. Otherwise, the user agent must split the attribute's value on spaces, and let keys be the resulting tokens.

  3. For each value in keys in turn, in the order the tokens appeared in the attribute's value, run the following substeps:

    1. If the value is not a string exactly one Unicode code point in length, then skip the remainder of these steps for this value.

    2. If the value does not correspond to a key on the system's keyboard, then skip the remainder of these steps for this value.

    3. If the user agent can find a combination of modifier keys that, with the key that corresponds to the value given in the attribute, can be used as a shortcut key, then the user agent may assign that combination of keys as the element's assigned access key and abort these steps.

  4. Fallback: Optionally, the user agent may assign a key combination of its choosing as the element's assigned access key and then abort these steps.

  5. If this step is reached, the element has no assigned access key.

Once a user agent has selected and assigned an access key for an element, the user agent should not change the element's assigned access key unless the accesskey content attribute is changed or the element is moved to another Document.

When the user presses the key combination corresponding to the assigned access key for an element, if the element defines a command, and the command's Hidden State facet is false (visible), and the command's Disabled State facet is also false (enabled), then the user agent must trigger the Action of the command.

User agents may expose elements that have an accesskey attribute in other ways as well, e.g. in a menu displayed in response to a specific key combination.

The accessKey IDL attribute must reflect the accesskey content attribute.

The accessKeyLabel IDL attribute must return a string that represents the element's assigned access key, if any. If the element does not have one, then the IDL attribute must return the empty string.

7.5 contenteditable 속성

contenteditable속성은 나열 속성이며, 키워드는 빈 문자열, true, false 입니다. 빈 문자열을 사용했을 때에는 true상태입니다. 이에 더해, inherit라는 세번째 상태가 있는데, 값을 명시하지 않았거나, 잘못된 값이 입력되었을 때의 기본값입니다.

The contenteditable attribute is an enumerated attribute whose keywords are the empty string, true, and false. The empty string and the true keyword map to the true state. The false 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).

true 상태는 요소를 편집할 수 있음을 나타내고, false는 그 반대입니다. inherit일 경우, 만약 부모 요소가 편집 가능하다면 이 요소도 편집 가능한 것입니다.

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.

Specifically, if an HTML element has a contenteditable attribute set to the true state, or it has its contenteditable attribute set to the inherit state and if its nearest ancestor HTML element with the contenteditable attribute set to a state other than the inherit state has its attribute set to the true state, or if it and its ancestors all have their contenteditable attribute set to the inherit state but the Document has designMode enabled, then the UA must treat the element as editable (as described below).

Otherwise, either the HTML element has a contenteditable attribute set to the false state, or its contenteditable attribute is set to the inherit state and its nearest ancestor HTML element with the contenteditable attribute set to a state other than the inherit state has its attribute set to the false state, or all its ancestors have their contenteditable attribute set to the inherit state and the Document itself has designMode disabled; either way, the element is not editable.

element . contentEditable [ = value ]

contenteditable속성의 상태에 기반하여 "true", "false", "inherit" 중 하나를 반환합니다.

Returns "true", "false", or "inherit", based on the state of the contenteditable attribute.

상태를 설정할 수 있습니다.

Can be set, to change that state.

새 값이 세가지 문자열 중 하나가 아닐 경우 SYNTAX_ERR 예외를 반환합니다.

Throws a SYNTAX_ERR exception if the new value isn't one of those strings.

element . isContentEditable

요소가 편집 가능한 상태라면 true, 아니라면 false를 반환합니다.

Returns true if the element is editable; otherwise, returns false.

The contentEditable IDL attribute, on getting, must return the string "true" if the content attribute is set to the true state, "false" if the content attribute is set to the false state, and "inherit" otherwise. On setting, if the new value is an ASCII case-insensitive match for the string "inherit" then the content attribute must be removed, if the new value is an ASCII case-insensitive match for the string "true" then the content attribute must be set to the string "true", if the new value is an ASCII case-insensitive match for the string "false" then the content attribute must be set to the string "false", and otherwise the attribute setter must raise a SYNTAX_ERR exception.

The isContentEditable IDL attribute, on getting, must return true if the element is editable, and false otherwise.

If an element is editable and its parent element is not, or if an element is editable and it has no parent element, then the element is an editing host. Editable elements can be nested. Editing hosts are typically focusable and typically form part of the tab order. An editing host can contain non-editable sections, these are handled as described below. An editing host can contain non-editable sections that contain further editing hosts.

When an editing host has focus, it must have a caret position that specifies where the current editing position is. It may also have a selection.

How the caret and selection are represented depends entirely on the UA.

7.5.1 사용자의 편집 동작

There are several actions that the user agent should allow the user to perform while the user is interacting with an editing host. How exactly each action is triggered is not defined for every action, but when it is not defined, suggested key bindings are provided to guide implementors.

Move the caret

User agents must allow users to move the caret to any position within an editing host, even into nested editable elements. This could be triggered as the default action of keydown events with various key identifiers and as the default action of mousedown events.

Change the selection

User agents must allow users to change the selection within an editing host, even into nested editable elements. User agents may prevent selections from being made in ways that cross from editable elements into non-editable elements (e.g. by making each non-editable descendant atomically selectable, but not allowing text selection within them). This could be triggered as the default action of keydown events with various key identifiers and as the default action of mousedown events.

Insert text

This action must be triggered as the default action of a textInput event, and may be triggered by other commands as well. It must cause the user agent to insert the specified text (given by the event object's data attribute in the case of the textInput event) at the caret.

If the caret is positioned somewhere where phrasing content is not allowed (e.g. inside an empty ol element), then the user agent must not insert the text directly at the caret position. In such cases the behavior is UA-dependent, but user agents must not, in response to a request to insert text, generate a DOM that is less conformant than the DOM prior to the request.

User agents should allow users to insert new paragraphs into elements that contains only content other than paragraphs.

For example, given the markup:

<section>
 <dl>
  <dt> Ben </dt>
  <dd> Goat </dd>
 </dl>
</section>

...the user agent should allow the user to insert p elements before and after the dl element, as children of the section element.

Break block

UAs should offer a way for the user to request that the current paragraph be broken at the caret, e.g. as the default action of a keydown event whose identifier is the "Enter" key and that has no modifiers set.

The exact behavior is UA-dependent, but user agents must not, in response to a request to break a paragraph, generate a DOM that is less conformant than the DOM prior to the request.

Insert a line separator

UAs should offer a way for the user to request an explicit line break at the caret position without breaking the paragraph, e.g. as the default action of a keydown event whose identifier is the "Enter" key and that has a shift modifier set. Line separators are typically found within a poem verse or an address. To insert a line break, the user agent must insert a br element.

If the caret is positioned somewhere where phrasing content is not allowed (e.g. in an empty ol element), then the user agent must not insert the br element directly at the caret position. In such cases the behavior is UA-dependent, but user agents must not, in response to a request to insert a line separator, generate a DOM that is less conformant than the DOM prior to the request.

Delete

UAs should offer a way for the user to delete text and elements, including non-editable descendants, e.g. as the default action of keydown events whose identifiers are "U+0008" or "U+007F".

Five edge cases in particular need to be considered carefully when implementing this feature: backspacing at the start of an element, backspacing when the caret is immediately after an element, forward-deleting at the end of an element, forward-deleting when the caret is immediately before an element, and deleting a selection whose start and end points do not share a common parent node.

In any case, the exact behavior is UA-dependent, but user agents must not, in response to a request to delete text or an element, generate a DOM that is less conformant than the DOM prior to the request.

Insert, and wrap text in, semantic elements

UAs should offer the user the ability to mark text and paragraphs with semantics that HTML can express.

UAs should similarly offer a way for the user to insert empty semantic elements to subsequently fill by entering text manually.

UAs should also offer a way to remove those semantics from marked up text, and to remove empty semantic element that have been inserted.

In response to a request from a user to mark text up in italics, user agents should use the i element to represent the semantic. The em element should be used only if the user agent is sure that the user means to indicate stress emphasis.

In response to a request from a user to mark text up in bold, user agents should use the b element to represent the semantic. The strong element should be used only if the user agent is sure that the user means to indicate importance.

The exact behavior is UA-dependent, but user agents must not, in response to a request to wrap semantics around some text or to insert or remove a semantic element, generate a DOM that is less conformant than the DOM prior to the request.

Select and move non-editable elements nested inside editing hosts

UAs should offer a way for the user to move images and other non-editable parts around the content within an editing host. This may be done using the drag and drop mechanism. User agents must not, in response to a request to move non-editable elements nested inside editing hosts, generate a DOM that is less conformant than the DOM prior to the request.

Edit form controls nested inside editing hosts

When an editable form control is edited, the changes must be reflected in both its current value and its default value. For input elements this means updating the defaultValue IDL attribute as well as the value IDL attribute; for select elements it means updating the option elements' defaultSelected IDL attribute as well as the selected IDL attribute; for textarea elements this means updating the defaultValue IDL attribute as well as the value IDL attribute. (Updating the default* IDL attributes causes content attributes to be updated as well.)

User agents may perform several commands per user request; for example if the user selects a block of text and hits Enter, the UA might interpret that as a request to delete the content of the selection followed by a request to break the paragraph at that position.

User agents may add DOM changes entries to the undo transaction history of the editing host's Document object each time an action is triggered.

All of the actions defined above, whether triggered by the user or programmatically (e.g. by execCommand() commands), must fire mutation events as appropriate.

7.5.2 문서 전체를 편집 가능하도록 만들기

Documents have a designMode, which can be either enabled or disabled.

document . designMode [ = value ]

문서가 편집 가능하다면 "on" 을, 아니라면 "off"를 반환합니다.

Returns "on" if the document is editable, and "off" if it isn't.

값을 설정하여, 문서의 현재 상태를 변경할 수 있습니다.

Can be set, to change the document's current state.

The designMode IDL attribute on the Document object takes two values, "on" and "off". When it is set, the new value must be compared in an ASCII case-insensitive manner to these two values. If it matches the "on" value, then designMode must be enabled, and if it matches the "off" value, then designMode must be disabled. Other values must be ignored.

When designMode is enabled, the IDL attribute must return the value "on", and when it is disabled, it must return the value "off".

The last state set must persist until the document is destroyed or the state is changed. Initially, documents must have their designMode disabled.

7.6 철자와 문법 체크

User agents can support the checking of spelling and grammar of editable text, either in form controls (such as the value of textarea elements), or in elements in an editing host (using contenteditable).

For each element, user agents must establish a default behavior, either through defaults or through preferences expressed by the user. There are three possible default behaviors for each element:

true-by-default
The element will be checked for spelling and grammar if its contents are editable.
false-by-default
The element will never be checked for spelling and grammar.
inherit-by-default
The element's default behavior is the same as its parent element's. Elements that have no parent element cannot have this as their default behavior.

spellcheck속성은 나열 속성이며, 키워드에는 빈 문자열, true, false를 사용할 수 있습니다. 빈 문자열과 true 키워드는 true 상태에 연결되며, false 키워드는 false 상태에 연결됩니다. 이에 더해 default 상태가 있는데, 이것은 값이 생략되었을 때의 기본값이며, 잘못된 값이 사용되었을때의 기본값이기도 합니다.

The spellcheck attribute is an enumerated attribute whose keywords are the empty string, true and false. The empty string and the true keyword map to the true state. The false 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).

true 상태는 요소가 철자 및 문법 체크가 되어야 함을 나타냅니다. default 상태는 기본적인 동작방식에 따른다는 것을 나타내며, 부모 요소의 해당 속성을 상속했을 가능성이 있습니다. false 상태는 요소가 체크되지 않을 것임을 나타냅니다.

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 spellcheck state. The false state indicates that the element is not to be checked.


element . spellcheck [ = value ]

요소에서 맞춤법과 문법 검사를 해야 한다면 true를, 그렇지 않다면 false를 반환합니다.

Returns true if the element is to have its spelling and grammar checked; otherwise, returns false.

값을 설정하여, 기본값을 덮어 쓰고 내용속성 spellcheck를 설정할 수 있습니다.

Can be set, to override the default and set the spellcheck content attribute.

The spellcheck IDL attribute, on getting, must return true if the element's spellcheck content attribute is in the true state, or if the element's spellcheck content attribute is in the default state and the element's default behavior is true-by-default, or if the element's spellcheck content attribute is in the default state and the element's default behavior is inherit-by-default and the element's parent element's spellcheck IDL attribute would return true; otherwise, if none of those conditions applies, then the attribute must instead return false.

The spellcheck IDL attribute is not affected by user preferences that override the spellcheck content attribute, and therefore might not reflect the actual spellchecking state.

On setting, if the new value is true, then the element's spellcheck content attribute must be set to the literal string "true", otherwise it must be set to the literal string "false".


User agents must only consider the following pieces of text as checkable for the purposes of this feature:

For text that is part of a text node, the element with which the text is associated is the element that is the immediate parent of the first character of the word, sentence, or other piece of text. For text in attributes, it is the attribute's element. For the values of input and textarea elements, it is the element itself.

To determine if a word, sentence, or other piece of text in an applicable element (as defined above) is to have spelling- and/or grammar-checking enabled, the UA must use the following algorithm:

  1. If the user has disabled the checking for this text, then the checking is disabled.
  2. Otherwise, if the user has forced the checking for this text to always be enabled, then the checking is enabled.
  3. Otherwise, if the element with which the text is associated has a spellcheck content attribute, then: if that attribute is in the true state, then checking is enabled; otherwise, if that attribute is in the false state, then checking is disabled.
  4. Otherwise, if there is an ancestor element with a spellcheck content attribute that is not in the default state, then: if the nearest such ancestor's spellcheck content attribute is in the true state, then checking is enabled; otherwise, checking is disabled.
  5. Otherwise, if the element's default behavior is true-by-default, then checking is enabled.
  6. Otherwise, if the element's default behavior is false-by-default, then checking is disabled.
  7. Otherwise, if the element's parent element has its checking enabled, then checking is enabled.
  8. Otherwise, checking is disabled.

If the checking is enabled for a word/sentence/text, the user agent should indicate spelling and/or grammar errors in that text. User agents should take into account the other semantics given in the document when suggesting spelling and grammar corrections. User agents may use the language of the element to determine what spelling and grammar rules to use, or may use the user's preferred language settings. UAs should use input element attributes such as pattern to ensure that the resulting value is valid, where possible.

If checking is disabled, the user agent should not indicate spelling or grammar errors for that text.

The element with ID "a" in the following example would be the one used to determine if the word "Hello" is checked for spelling errors. In this example, it would not be.

<div contenteditable="true">
 <span spellcheck="false" id="a">Hell</span><em>o!</em>
</div>

The element with ID "b" in the following example would have checking enabled (the leading space character in the attribute's value on the input element causes the attribute to be ignored, so the ancestor's value is used instead, regardless of the default).

<p spellcheck="true">
 <label>Name: <input spellcheck=" false" id="b"></label>
</p>

이 명세에서는 사용자 에이전트가 어떻게 철자와 문법 검사를 하는지 정의하지는 않습니다. 사용자 에이전트는 요청에 의해서 체크할수도, 체크가 허용되어 있는 동안 계속 체크할수도, 아니면 다른 인터페이스를 사용할수도 있습니다.

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.

이 메서드를 사용하는 것은 탭 내비게이션과 키보드 접근성을 차단하는 것과 같습니다. 돌아가기