Warning:
This wiki has been archived and is now read-only.

HTML5/editing

From HTML5 Chinese Interest Group Wiki
Jump to: navigation, search

用户交互

hidden 属性

所有的HTML 元素都可以设置 hidden属性。hidden属性是一个布尔属性。当一个元素指定了该属性时,则表示该元素无效或不再适用。User agents不应该渲染指定了 hidden 属性的元素。

在下面这个例子中,hidden属性被用来隐藏网页游戏的主界面直到用户登录:
  <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 属性,它会隐藏该演示内所有的内容,包括,例如,屏幕阅读器。

未指定 hidden 属性的元素不能链接或指向指定了 hidden 属性的元素。


例如,使用 href 属性链接到某个指定了 hidden 属性的部分是不正确的。因为,如果该内容是不适用或者不相关的,那么没有理由去链接。


用ARIA aria-describedby 属性指向 hidden 属性本身的描述也是不正确的。隐藏一个部分的意思是指在当前时间该部分对于它任何人都没有意义也不相关,因此它显然不能有效的描述用户交互的内容。


IDL属性 hidden,必须能够反映与之同名的属性的内容。

啟動

聚焦

当某元素被聚焦时,被文档(document)接收的按键事件(key event),必须以该元素作为目标。有可能会出现没有元素被聚焦的情形;当没有元素被聚焦时,被文档接收的按键事件,必须以body元素(#the body element)为目标(如果存在此元素),否则,以文档(Document)的根元素作为目标,如果不存在此根元素,则按键事件必不能被触发。


User agent可以分别为每个浏览上下文(#browsing context)或Document跟踪焦点,或者,可以支持每个顶层浏览上下文(#top-level browsing context)仅有一个元素可被聚焦 - 在这点上,user agent应该遵循平台(platform)的约定。


在一个顶层浏览上下文中当前聚焦的元素必须与该顶层上下文本身是否获得了系统焦点(system focus)无关。


当一个子浏览上下文(#child browsing context)聚焦时,它的浏览上下文容器(#browsing context container)必须也被聚焦。


注:当一个元素聚焦时,该元素必须匹配CSS的:focus伪类。


连续聚焦导航与tabindex属性

内容属性tabindex定义了元素是否可被聚焦,是否能被使用连续聚焦导航触及,以及该元素在连续聚焦导航中的相对顺序。"tab index"的名字来源于使用"tab"键在可聚焦元素间进行导航的通用用法。术语"tabbing"指的是,在能被连续聚焦导航触及的可聚焦元素间的前移。


如果指定了tabindex属性,其值必须为一个合法的整数(#valid integer)


如果指定了该属性,则必须使用整数解析规则(#rules for parsing integers)对它进行解析。该属性值具有以下含义:


如果该属性被省略或对其值的解析返回一个错误

User agent应该遵循平台(platform)的约定去做判定,该元素是否可被聚焦,如果是的话,该元素是否可被连续聚焦导航触及,如果可以的话,它在其中的相对顺序应该是什么。
注:忽略平台(platform)约定且总是允许某元素可被聚焦的一个合法的理由是,如果用户激活某元素的唯一机制仅仅是通过使用键盘行为去触发元素的聚焦。


如果该属性值为一个负整数

User agent必须允许该元素可被聚焦,但,不能允许它被连续聚焦导航触及。
注:忽略不能允许元素被连续聚焦导航触及的需求的一个合法的理由是,如果用户移动焦点的唯一机制是连续聚焦导航。例如,仅有键盘的用户不能在一个负的tabindex文本域上进行点击操作,所以,用户的user agent应当允许用户tab到该控件而不顾此约束。


如果该属性值为零

User agent必须允许该元素可聚焦,允许该元素可被连续聚焦导航触及,遵循平台(platform)约定去判定该元素的相对顺序。


如果该属性值大于零

User agent必须允许该元素可聚焦,允许该元素可被连续聚焦导航触及,应该安排该元素在连续聚焦导航中的顺序:
  • 在任何tabindex属性被忽略或对其值解析后返回一个错误的可聚焦元素之前,
  • 在任何tabindex属性值小于等于零的可聚焦元素之前,
  • 在任何tabindex属性值大于零,小于该元素的tabindex值的元素之后,
  • 在任何tab index属性值等于该元素的tab index值且在文档的树顺序(#tree order)中比该元素靠前的元素之后,
  • 在任何tab index属性值等于该元素的tab index值且在文档的树顺序(#tree order)中比该元素靠后的元素之前,
  • 在任何tab index属性值大于该元素的tab index值的元素之前。


如果一个元素按上述的tabindex属性的定义,定义为可聚焦,则该元素为特别的可聚焦元素。


特别的可聚焦元素,如果它不以其他方式有一个激活行为(#activation behavior)定义的,而又有激活行为,这个激活行为不会做任何事情。

{{note|这意味着,一个仅仅因为它的tabindex属性才能被聚焦的元素,会在被非鼠标激活时,触发一个click事件(如,当元素获得焦点时,按下"enter"键)


IDL属性tabIndex,必须反映内容属性tabindex的值。可聚焦元素的默认值为零,不可聚焦元素的默认值为-1。

聚焦管理

如果user agent的默认行为允许某元素获得焦点,或该元素为特别的可聚焦元素,但仅当该元素(#being rendered)被渲染或是一个表示嵌入内容的(#represents embeded content)canvas元素的后代时,该元素才被称为可聚焦元素。


User agent应该令以下元素为可聚焦元素(#focusable),除非平台约定有不同的表述:

  • 具有href属性的a元素
  • 具有href属性的link元素
  • 没有被禁用(#disabled)的button元素
  • type属性不为隐藏(#Hidden)状态且没有被禁用的input元素
  • 没有被禁用的select元素
  • 没有被禁用的textarea元素
  • 没有disabled属性的command元素
  • 设有draggable属性的元素,如果有可能user agent允许用户使用非指针设备进行拖拽操作的
  • 编辑宿主(#Editing hosts)
  • 浏览上下文容器(#Browsing context containers)


另外,每一个由area元素生成的形状都应该为可聚焦元素。除非平台约定有不同的描述。

設定鍵盤快捷鍵

編輯

使文档区域可编辑:contenteditable内容属性

contenteditable属性是一个枚举属性,其关键字包括空字符串、truefalse。空字符串及关键字true映射到状态。关键字false映射到状态。另外,还存在第三种状态继承,该状态为缺省默认值(以及无效默认值)。

状态表示元素可编辑。状态继承表示如果元素的父亲可编辑则该元素也可编辑。状态表示元素不可编辑。

此区块中不是标准描述,实现要求在下面给出。

element . contentEditable [ - value ]

根据contenteditable属性的状态返回“true”、“false”或“inherit”。

可以被设置,用于修改该状态。

如果新值不是这些字符串之一,则抛出一个SyntaxError异常。

element . isContentEditable'

如果元素可编辑则返回真;否则返回假。

在获取contentEditable IDL属性时,如果内容属性被设为状态真则必须返回字符串“true”,如果内容属性被设为状态假则必须返回字符串“false”,否则必须返回字符串“inherit”。在设置时,如果新值能够ASCII不区分大小写的匹配字符串“inherit”则必须移除内容属性,如果新值能够ASCII不区分大小写的匹配字符串“true”则必须设内容属性为字符串“true”,如果新值能够ASCII不区分大小写的匹配字符串“false”则必须设内容属性为字符串“false”,否则属性的设置器必须抛出一个SyntaxError异常。

在获取isContentEditable IDL属性时,如果元素是编辑宿主可编辑的则必须返回真,否则必须返回假。

使整个文档可编辑:designMode IDL属性

文档拥有一个designMode,其值可以为可用或不可用。

此区块中不是标准描述,实现要求在下面给出。

document . designMode [ - value ]

如果文档可编辑则返回“on”,如果不可编辑则返回“off”。

可以被设置,用来改变文档的当前状态。

Document对象上的designMode IDL属性拥有两个值,“on”和“off”。在设置时,新值必须在ASCII不区分大小写机制下比较这两个值。如果匹配“on”则必须启用designMode,如果匹配“off”则必须禁用designMode。必须忽略其他值。

若启用designMode则IDL属性必须返回“on”,若其禁用则必须返回“off”。

最新的状态必须被保留至文档销毁或状态改变。在初始化时,必须禁用文档的designMode

页面内编辑器的最佳实践