电视下⽤户需要通过遥控键上下左右来变换焦点操控，系统会根据按键方向自动寻焦。

默认情况下系统根据按键方向计算出方向上最近的可聚焦节点聚焦。修改一些节点属性可以改变默认寻焦规则。 通过本节可以了解电视焦点的使用

• 可聚焦节点
• 自动寻焦
• 默认焦点
• 父子节点寻焦规则
• 阻止焦点离开容器
• 指定下一个被寻焦节点
• 使用伪类
• 焦点相关方法

可聚焦节点

符合以下两个条件节点可被寻焦

1. 节点绑定了onfocus或onclick函数，则可对焦
2. 节点设置了"focusable"属性值，且属性值为true

自动寻焦

当遥控器上下左右变换时默认会寻找下一个可以被寻焦节点，如果没有则停在当前焦点。

当按键方向上有多个节点时，会根据优先选择按键方向有重合的节点，如果都不重合则选择距离最近的节点，
如下图所示，A、B、C、D、E、F节点为可聚焦节点，箭头指向为当前按键方向寻到的节点：

默认焦点

设置"autofocus"，可以设置默认焦点，autofocus必须设置在可寻焦节点，如果不设置"autofocus"则没有默认没有焦点，上下左右键点击后开始寻焦。

示例如下： 节点1 节点2 节点3 都可获取焦点，页面展示是节点3默认获取焦点

<template>
  <div>
      <text onclick="clickFunction">节点1</text>
      <text onfocus="focusFunction">节点2</text>
      <text focusable="true" autofocus="true">节点3</text>
  </div>
</template>

父子节点寻焦规则

当父子节点都可聚焦时，默认父节点先于子节点获取焦点，当父节点不处理时，再给子节点处理；可通过descendantfocusability属性修改焦点顺序，当设为block时父节点处理焦点，子节点被阻断不能处理焦点

示例如下：

<template>
  <div>
      <text onclick="clickFunction">节点1</text>
      <div onfocus="focusFunction1" descendantfocusability="block">
        <text onfocus="focusFunction2">节点2</text>
      </div>
  </div>
</template>

阻止焦点离开容器

使用focusoutallowed可阻止焦点跳出该容器，参考文档容器属性

如下图所示，E2，E3，E4，E5，E6，E7都为可聚焦节点，当焦点在E3时，"focusoutallowed"属性"left"设置为"true"时，按左键E6会获取焦点，如果设置为"false"则E4获取焦点。

指定下一个被寻焦节点

设置"nextfocus-up"，"nextfocus-down"，"nextfocus-left"，"nextfocus-right"属性，可以指定当前焦点各个方向上下一个被寻焦节点，指定的被寻焦节点可以是父节点也可以是子节点。

、

如图，当前焦点在E3时，可指定下一个各个方向的焦点为E4、P2、E5、E6

示例如下： 指定当前节点聚焦时，按左键后的聚焦的节点

<template>
  <div>
      <div>
        <text nextfocus-left="element1">当前聚焦节点</text>
      </div>
      <div id="element1">
        <text>当前聚焦节点</text>
      </div>
  </div>

使用伪类

1. ":focus": 可以用来设计组件聚焦的效果
2. ":blur": 可以用来设计组件焦点离开的效果
3. ":quick-focus": 可以用来为list组件设置快速滚动获取焦点效果，参考文档list组件伪类
4. ":quick-blur": 可以用来为list组件设置快速滚动丢失焦点效果，参考文档list组件伪类

焦点相关方法

使用元素通用方法focus()、isFocused()、hasFocus()，可以同台操控焦点，判断当前焦点状态。参考文档通用方法

1. focus() 可以动态聚焦当前节点。

2. isFocused() 可以通过此方法判断，当前焦点是否在本节点。

3. hasFocus() 可以通过此方法判断，当前节焦点是否在本节点或者节点的子节点上。