CN111796728A - 焦点控制的方法、装置、设备及计算机可读存储介质 - Google Patents

焦点控制的方法、装置、设备及计算机可读存储介质 Download PDF

Info

Publication number
CN111796728A
CN111796728A CN201910873013.2A CN201910873013A CN111796728A CN 111796728 A CN111796728 A CN 111796728A CN 201910873013 A CN201910873013 A CN 201910873013A CN 111796728 A CN111796728 A CN 111796728A
Authority
CN
China
Prior art keywords
focus
component
html element
html
instruction
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201910873013.2A
Other languages
English (en)
Other versions
CN111796728B (zh
Inventor
王斯杰
严媛媛
黄森斌
郑瀚
林顺
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Xiamen Yaji Software Co Ltd
Original Assignee
Xiamen Yaji Software Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Xiamen Yaji Software Co Ltd filed Critical Xiamen Yaji Software Co Ltd
Priority to CN201910873013.2A priority Critical patent/CN111796728B/zh
Publication of CN111796728A publication Critical patent/CN111796728A/zh
Application granted granted Critical
Publication of CN111796728B publication Critical patent/CN111796728B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请实施例提供了一种焦点控制的方法、装置、设备及计算机可读存储介质，该方法包括：接收第一指令；根据第一指令，通过预定的UI焦点处理方式，将第一UI组件包括的超文本标记语言HTML元素上的焦点传递到第二UI组件的HTML元素上；在第二UI组件的HTML元素对应的显示界面上显示焦点的状态。该方法实现了第一UI组件与第二UI组件之间直接进行焦点传递，使各个UI组件上进行焦点传递方便，用户体验度提高。

Description

焦点控制的方法、装置、设备及计算机可读存储介质
技术领域
本申请涉及计算机技术领域，具体而言，本申请涉及一种焦点控制的方法、装置、设备及计算机可读存储介质。
背景技术
现有技术中的超文本标记语言HTML提供的焦点管理方式只能够在HTML元素上设置是否响应焦点。一个HTML元素在获取焦点之后，只能将焦点传递给下一个可获取焦点的HTML元素，例如登陆框，用户名输入username input以及密码输入password input均为可获取焦点的元素，在输入用户名后，按下键盘上的tab按键跳转到密码输入。当有多个用户界面UI组件，一个UI组件内可响应焦点html元素可能不仅仅是2个，可能有许多个，现有的焦点的默认传递方式不方便，而且各UI组件之间也不能直接传递焦点，用户体验差。
发明内容
本申请针对现有的方式的缺点，提出一种焦点控制的方法、装置、设备及计算机可读存储介质，用以解决各UI组件之间不能直接传递焦点的问题。
第一方面，本申请提供了一种焦点控制的方法，包括：
接收第一指令；
根据第一指令，通过预定的用户界面UI焦点处理方式，将第一UI组件包括的超文本标记语言HTML元素上的焦点传递到第二UI组件的HTML元素上；
在第二UI组件的HTML元素对应的显示界面上显示焦点的状态。
可选地，第一指令包括tab按键事件、shift按键加tab按键事件中的至少一项。
可选地，UI焦点处理方式，包括以下至少一项：
各UI组件之间传递焦点的规则、一个UI组件所包括的多个HTML元素之间传递焦点的规则。
可选地，根据第一指令，通过预定的UI焦点处理方式，将第一UI组件包括的HTML元素上的焦点传递到第二UI组件的HTML元素上，包括：
接收第一指令包括的tab按键事件，通过预定的UI焦点处理方式，将第一UI组件所包括的HTML元素上的焦点传递到第二UI组件的HTML元素上。
可选地，在第二UI组件的HTML元素对应的显示界面上显示焦点的状态，包括：
当第一UI组件所包括的HTML元素上的焦点传递到第二UI组件的HTML元素上，在第二UI组件的HTML元素对应的拖动条、输入框中的任意一项上以高亮的方式显示焦点的状态。
可选地，各UI组件之间传递焦点的规则，包括：
确定一个UI组件所处的位置，UI组件包括至少一个HTML元素，至少一个HTML元素中的一个HTML元素上存在焦点；
根据UI组件所处的位置，将焦点传递到其他的UI组件所包括的一个HTML元素上。
可选地，第二UI组件对应的标识名称的显示状态包括不显示、高亮显示中的任意一项。
第二方面，本申请提供了一种焦点控制的装置，包括：
第一处理模块，用于接收第一指令；
第二处理模块，用于根据第一指令，通过预定的UI焦点处理方式，将第一UI组件包括的超文本标记语言HTML元素上的焦点传递到第二UI组件的HTML元素上；
第三处理模块，用在第二UI组件的HTML元素对应的显示界面上显示焦点的状态。
可选地，第一指令包括tab按键事件、shift按键加tab按键事件中的至少一项。
可选地，UI焦点处理方式，包括以下至少一项：
各UI组件之间传递焦点的规则、一个UI组件所包括的多个HTML元素之间传递焦点的规则。
可选地，第二处理模块，具体用于接收第一指令包括的tab按键事件，通过预定的UI焦点处理方式，将第一UI组件所包括的HTML元素上的焦点传递到第二UI组件的HTML元素上。
可选地，第三处理模块，具体用于当第一UI组件所包括的HTML元素上的焦点传递到第二UI组件的HTML元素上，在第二UI组件的HTML元素对应的拖动条、输入框中的任意一项上以高亮的方式显示焦点的状态。
可选地，各UI组件之间传递焦点的规则，包括：
确定一个UI组件所处的位置，UI组件包括至少一个HTML元素，至少一个HTML元素中的一个HTML元素上存在焦点；
根据UI组件所处的位置，将焦点传递到其他的UI组件所包括的一个HTML元素上。
可选地，第二UI组件对应的标识名称的显示状态包括不显示、高亮显示中的任意一项。
第三方面，本申请提供了一种电子设备，包括：处理器、存储器和总线；
总线，用于连接处理器和存储器；
存储器，用于存储操作指令；
处理器，用于通过调用操作指令，执行本申请第一方面的焦点控制的方法。
第四方面，本申请提供了一种计算机可读存储介质，存储有计算机程序，计算机程序被用于执行本申请第一方面的焦点控制的方法。
本申请实施例提供的技术方案，至少具有如下有益效果：
接收第一指令；根据第一指令，通过预定的UI焦点处理方式，将第一UI组件包括的超文本标记语言HTML元素上的焦点传递到第二UI组件的HTML元素上；在第二UI组件的HTML元素对应的显示界面上显示焦点的状态，如此，实现了第一UI组件与第二UI组件之间直接进行焦点传递，使各个UI组件上进行焦点传递方便，用户体验度提高。
本申请附加的方面和优点将在下面的描述中部分给出，这些将从下面的描述中变得明显，或通过本申请的实践了解到。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对本申请实施例描述中所需要使用的附图作简单地介绍。
图1为本申请实施例提供的一种焦点控制的方法的流程示意图；
图2为本申请实施例提供的焦点控制的示意图；
图3为本申请实施例提供的焦点控制的示意图；
图4为本申请实施例提供的焦点控制的示意图；
图5为本申请实施例提供的焦点控制的示意图；
图6为本申请实施例提供的焦点控制的示意图；
图7为本申请实施例提供的焦点控制的示意图；
图8为本申请实施例提供的焦点控制的示意图；
图9为本申请实施例提供的焦点控制的示意图；
图10为本申请实施例提供的焦点控制的示意图；
图11为本申请实施例提供的一种焦点控制的装置的结构示意图；
图12为本申请实施例提供的一种电子设备的结构示意图。
具体实施方式
下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能解释为对本发明的限制。
本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。
本技术领域技术人员可以理解，除非另外定义，这里使用的所有术语(包括技术术语和科学术语)，具有与本发明所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语，应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非像这里一样被特定定义，否则不会用理想化或过于正式的含义来解释。
为了更好的理解及说明本申请实施例的方案，下面对本申请实施例中所涉及到的一些技术用语进行简单说明。
超文本标记语言HTML：超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容，例如，文字如何处理、画面如何安排、图片如何显示等。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
用户界面UI组件：UI组件(USER INTERFACE Module，用户界面组件)，即用户界面组件，组件即将一段或几段完成各自功能的代码段封装为一个或几个独立的部分，用户界面组件包含了这样一个或几个具有各自功能的代码段，最终完成了用户界面的表示。
HTML元素：指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
stopPropagation()方法：不再派发事件。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。该方法将停止事件的传播，阻止它被分派到其他Document节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个Document节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
shadowDOM：一个网页会形成一颗DOM树，树上有很多结点，但过多的结点使结构复杂起来，Shadow DOM允许用封装的方式简化这种结构。Shadow DOM是网页DOM树上的特殊结点的结构，这个结点内部同样可以包含一颗DOM树，不过在网页DOM树上只会看到ShadowDOM的根节点。如<video>标签实际上运用了Shadow DOM来包含一系列组件。
下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。
本申请实施例中提供了一种焦点控制的方法，该方法的流程示意图如图1所示，该方法包括：
S101，接收第一指令。
可选地，第一指令包括tab按键事件、shift按键加tab按键事件中的至少一项。
S102，根据第一指令，通过预定的用户界面UI焦点处理方式，将第一UI组件包括的超文本标记语言HTML元素上的焦点传递到第二UI组件的HTML元素上。
可选地，UI焦点处理方式，包括以下至少一项：
各UI组件之间传递焦点的规则、一个UI组件所包括的多个HTML元素之间传递焦点的规则。
S103，在第二UI组件的HTML元素对应的显示界面上显示焦点的状态。
本申请实施例中，接收第一指令；根据第一指令，通过预定的UI焦点处理方式，将第一UI组件包括的超文本标记语言HTML元素上的焦点传递到第二UI组件的HTML元素上；在第二UI组件的HTML元素对应的显示界面上显示焦点的状态，如此，实现了第一UI组件与第二UI组件之间直接进行焦点传递，使各个UI组件上进行焦点传递方便，用户体验度提高。
可选地，根据第一指令，通过预定的UI焦点处理方式，将第一UI组件包括的HTML元素上的焦点传递到第二UI组件的HTML元素上，包括：
接收第一指令包括的tab按键事件，通过预定的UI焦点处理方式，指示第一UI组件丢弃第一UI组件所包括的HTML元素上的焦点，将第一UI组件所包括的HTML元素上的焦点传递到第二UI组件的HTML元素上。
可选地，在第二UI组件的HTML元素对应的显示界面上显示焦点的状态，包括：
当第一UI组件所包括的HTML元素上的焦点传递到第二UI组件的HTML元素上，在第二UI组件的HTML元素对应的拖动条、输入框中的至少一项上以高亮的方式显示焦点的状态。
可选地，各UI组件之间传递焦点的规则，包括：
确定一个UI组件所处的位置，UI组件包括至少一个HTML元素，至少一个HTML元素中的一个HTML元素上存在焦点；
根据UI组件所处的位置，指示丢弃至少一个HTML元素中的一个HTML元素上的焦点，将焦点传递到其他的UI组件所包括的一个HTML元素上。
可选地，一个UI组件所包括的多个HTML元素之间传递焦点的规则，包括：
确定一个UI组件所包括的多个HTML元素所处的位置，多个HTML元素中的一个HTML元素上存在焦点；
根据多个HTML元素所处的位置，指示丢弃多个HTML元素中的一个HTML元素上的焦点，将焦点传递到多个HTML元素中的其他HTML元素中的一个HTML元素上。
可选地，第二UI组件对应的标识名称的显示状态包括不显示、高亮显示中的任意一项。
可选地，第一UI组件为自定义UI组件，第二UI组件为自定义UI组件，UI组件为自定义UI组件，自定义UI组件的实现方式包括：
1.从window.HTMLElement继承一个类，并在这个类上加上了自定义的UI控制标记和逻辑。例如disabled、readonly、focused标记以及focus控制逻辑等。
2.使用window.customElements.define方法注册成一个标准的HTML元素。
由于UI组件内部需要处理很多细节，如果使用标准的前端开发方式，需要针对每个元素进行事件和一些逻辑处理的绑定工作；如果是自定义UI组件，可以让自定义UI组件在生成的时候就自发的进行一些操作，例如，接入focus管理。
可选地，自定义UI组件内传递焦点，如图2、图3和图4所示。如图2所示，一个Vec3组件里面包含了三个输入input，分别显示X、Y、Z属性；如图3所示，当点中第一个X的时候，X旁边的input获得焦点，并高亮显示；如图4所示，按一下tab键，焦点从X丢失，一直找到下一个可获取焦点的位置，就是Y旁边的input，这就是焦点在Vec3这个组件内的传递轨迹。如果是按shift键+tab键，则是按相反的顺序进行焦点传递。
可选地，自定义UI组件间传递焦点，如图5、图6和图7所示。如图5所示，这是一个ui-prop布局元素，它里面套了一个Vec3元素，一个Vec3元素对应一个Vec3组件，一个对应于Position的Vec3组件里面包含了三个输入input，分别显示X、Y、Z属性，显示属性为X的输入input对应一个HTML元素，显示属性为Y的输入input对应一个HTML元素，显示属性为Z的输入input对应一个HTML元素，Vec3组件为UI组件，Position为UI组件对应的标识名称；如图6所示，这是三个一样的Vec3元素，三个Vec3组件分别对应Position、Rotation和Scale，Position、Rotation和Scale为Vec3组件的标识名称，每个Vec3组件里面包含了三个输入input，分别显示X、Y、Z属性，显示属性为X的输入input对应一个HTML元素，显示属性为Y的输入input对应一个HTML元素，显示属性为Z的输入input对应一个HTML元素；如图7所示，这是三个一样的Vec3元素，三个Vec3组件分别对应Position、Rotation和Scale，每个Vec3组件里面包含了三个输入input，分别显示X、Y、Z属性，显示属性为X的输入input对应一个HTML元素，显示属性为Y的输入input对应一个HTML元素，显示属性为Z的输入input对应一个HTML元素，当点中Position这个名字，选中了Position这一行的ui-prop，按下tab按键，将焦点传递给了Rotation这一行所在的ui-prop。如果是默认的HTML传递方式，选中了Position这一行的ui-prop，按下tab按键，会将焦点从显示属性为X的输入input对应的HTML元素上传递给Position所在这一行的显示属性为Y的输入input对应的HTML元素上。ui-prop可以是一个类。
可选地，UI焦点处理方式通过UI焦点管理系统实现。如果有UI组件丢失焦点，UI焦点管理系统从这个UI组件的位置开始向下，或者向上查找同级别的其他UI组件，并将焦点传递给其他UI组件。UI焦点管理系统优先传将焦点传递给同一UI组件中的其他HTML元素，如图8所示：
UI焦点处理方式，包括以下至少一项：
各UI组件之间传递焦点的规则、一个UI组件所包括的多个HTML元素之间传递焦点的规则。
其中，一个UI组件所包括的多个HTML元素之间传递焦点的规则如规则1所示：
规则1.Position.X→Position.Y→Position.Z→Rotation.X...
焦点从HTML元素Position.X传递到HTML元素Position.Y，焦点从HTML元素Position.Y传递到HTML元素Position.Z，焦点从HTML元素Position.Z传递到HTML元素Rotation.X，焦点以此顺序进行传递。
其中，各UI组件之间传递焦点的规则如规则2所示：
规则2.Position→Rotation→Scale
焦点从Position对应的组件传递到Rotation对应的组件，焦点从Rotation对应的组件传递到Scale对应的组件。
可选地，如图8所示，按照HTML默认的焦点传递顺序：1.Position→Position.X→Position.Y→Position.Z→Rotation。Position不显示；当焦点在HTML元素Position.X上，显示属性为X的输入input高亮显示；当焦点在HTML元素Position.Y上，显示属性为Y的输入input高亮显示；当焦点在HTML元素Position.Z上，显示属性为Z的输入input高亮显示；以此类推。可选地，如图8所示，简化焦点传递数量，当选中Position这一行的时候，自动传递给内部第一个HTML元素Position.X，焦点传递顺序就变成了Position+Position.X→Position+Position.Y→Position+Position.Z→Rotation+Rotation.X→Rotation+Rotation.Y。当焦点在HTML元素Position.X上，Position和Position这一行显示属性为X的输入input都高亮显示；当焦点从HTML元素Position.X传递到HTML元素Position.Y上，Position和Position这一行显示属性为Y的输入input都高亮显示；当焦点从HTML元素Position.Y传递到HTML元素Position.Z上，Position和Position这一行显示属性为Z的输入input都高亮显示；当焦点从HTML元素Position.Z传递到HTML元素Rotation.X上，Rotation和Rotation这一行显示属性为X的输入input都高亮显示；当焦点从HTML元素Rotation.X传递到HTML元素Rotation.Y上，Rotation和Rotation这一行显示属性为Y的输入input都高亮显示；以此类推。
可选地，如图8所示，各UI组件之间传递焦点，焦点传递顺序就变成了Position→Rotation→Scale，焦点在Position对应的组件所包含的HTML元素Position.X上，Position这一行显示属性为X的输入input高亮显示，Position的显示状态包括不显示、高亮显示中任意一项；按下tab键，Position对应的组件丢弃焦点，UI焦点管理系统将焦点传递给Rotation对应的组件，焦点在Rotation对应的组件所包含的HTML元素Rotation.X上，Rotation这一行显示属性为X的输入input高亮显示，Rotation的显示状态包括不显示、高亮显示中任意一项；按下tab键，Rotation对应的组件丢弃焦点，UI焦点管理系统将焦点传递给Scale对应的组件，焦点在Scale对应的组件所包含的HTML元素Scale.X上，Scale这一行显示属性为X的输入input高亮显示，Scale的显示状态包括不显示、高亮显示中任意一项；按下tab键，Scale对应的组件丢弃焦点，UI焦点管理系统将焦点传递给Position对应的组件，焦点在Position对应的组件所包含的HTML元素Position.X上，Position这一行显示属性为X的输入input高亮显示，Position的显示状态包括不显示、高亮显示中任意一项。
可选地，如图8所示，选中ui-prop自动传递到内部第一个ui-input，一个HTML包括一个或多个UI组件，一个UI组件包括一个或多个HTML元素，一个HTML只能有一个焦点，每一个HTML元素上有一个focused标记，用focused标记记录UI焦点管理系统分配给某个HTML元素的焦点，在Position这一行的ui-prop上标记了focused，并且在里面的ui-input标记了focused，焦点是在ui-input里面的一个HTML元素上。
可选地，使用shadowDOM搭建一个基础的自定义UI组件对象。其中，这个自定义UI组件内可以包含多个可响应页面焦点的HTML元素。
如图9所示，A(拖动条)+B(输入框)整体作为一个可响应页面焦点的HTML元素；slider里面有两个可响应焦点的元素；可选地，写一个自定义元素，里面包含了2个输入框，这2个输入框分别作为可响应页面焦点的HTML元素。
可选地，捕获自定义UI组件的tab按键事件，并阻止tab按键事件使用自带的页面焦点系统进行焦点跳转；阻止后，接入UI焦点管理系统，查找并跳转到下一个自定义UI组件上。
可选地，通过“event.stopPropagation()”阻止浏览器的默认行为，从而阻止焦点的自动传递。
可选地，如图9所示，在操作滚动条的时候，焦点在滚动条上，滚动条显示获取焦点状态，焦点状态是高亮(图9为灰白图，未能明显显示高亮)，这时候按下tab按键，在滚动条上监听的按键事件捕获到tab之后，阻止html默认事件继续执行，然后通知UI焦点管理系统，找到下一个自定义UI组件，将焦点传递给下一个自定义UI组件。如图10所示，操作输入框的时候，焦点在输入框上，输入框显示获取焦点状态，焦点状态是高亮(图10为灰白图，未能明显显示高亮)，滚动条的高亮是因为规则约定，只要焦点在slider内，滚动条就高亮。按下tab按键，在滚动条上监听的按键事件捕获到tab之后，阻止html默认事件继续执行，然后通知UI焦点管理系统找到下一个自定义UI组件，并将焦点传递给下一个自定义UI组件。
可选地，将焦点从自定义UI组件A传递给自定义UI组件B，再将焦点从自定义UI组件B传递给自定义UI组件C，最后将焦点从自定义UI组件C传递给自定义UI组件A。具体过程包括：焦点在自定义UI组件A，按下tab键，自定义UI组件A丢弃焦点；UI焦点管理系统将焦点传递给自定义UI组件B；按下tab键，自定义UI组件B丢弃焦点；UI焦点管理系统将焦点传递给自定义UI组件C；按下tab键，自定义UI组件C丢弃焦点；UI焦点管理系统将焦点传递给自定义UI组件A。自定义UI组件A中包括三个HTML元素，即HTMLA、HTMLB以及HTMLC，自定义UI组件A中的各HTML元素之间也可以进行焦点传递，即在HTMLA、HTMLB以及HTMLC之间进行焦点传递。
本申请实施例中，实现了多个UI组件之间直接进行焦点传递，UI组件内部的HTML元素之间进行焦点传递，使各个UI组件上进行焦点传递方便，用户体验度提高。
基于相同的发明构思，本申请实施例还提供了一种焦点控制的装置，该装置的结构示意图如图11所示，焦点控制的装置60，包括第一处理模块601、第二处理模块602和第三处理模块603。
第一处理模块601，用于接收第一指令；
第二处理模块602，用于根据第一指令，通过预定的UI焦点处理方式，将第一UI组件包括的超文本标记语言HTML元素上的焦点传递到第二UI组件的HTML元素上；
第三处理模块603，用于在第二UI组件的HTML元素对应的显示界面上显示焦点的状态。
可选地，第一指令包括tab按键事件、shift按键加tab按键事件中的至少一项。
可选地，UI焦点处理方式，包括以下至少一项：
各UI组件之间传递焦点的规则、一个UI组件所包括的多个HTML元素之间传递焦点的规则。
可选地，第二处理模块602，具体用于接收第一指令包括的tab按键事件，通过预定的UI焦点处理方式，指示第一UI组件丢弃第一UI组件所包括的HTML元素上的焦点，将第一UI组件所包括的HTML元素上的焦点传递到第二UI组件的HTML元素上。
可选地，第三处理模块603，具体用于当第一UI组件所包括的HTML元素上的焦点传递到第二UI组件的HTML元素上，在第二UI组件的HTML元素对应的拖动条、输入框中的任意一项上以高亮的方式显示焦点的状态。
可选地，各UI组件之间传递焦点的规则，包括：
确定一个UI组件所处的位置，UI组件包括至少一个HTML元素，至少一个HTML元素中的一个HTML元素上存在焦点；
根据UI组件所处的位置，指示丢弃至少一个HTML元素中的一个HTML元素上的焦点，将焦点传递到其他的UI组件所包括的一个HTML元素上。
可选地，一个UI组件所包括的多个HTML元素之间传递焦点的规则，包括：
确定一个UI组件所包括的多个HTML元素所处的位置，多个HTML元素中的一个HTML元素上存在焦点；
根据多个HTML元素所处的位置，指示丢弃多个HTML元素中的一个HTML元素上的焦点，将焦点传递到多个HTML元素中的其他的HTML元素上。
可选地，第二UI组件对应的标识名称的显示状态包括不显示、高亮显示中的任意一项。
应用本申请实施例，至少具有如下有益效果：
接收第一指令；根据第一指令，通过预定的UI焦点处理方式，将第一UI组件包括的超文本标记语言HTML元素上的焦点传递到第二UI组件的HTML元素上；在第二UI组件的HTML元素对应的显示界面上显示焦点的状态，如此，实现了第一UI组件与第二UI组件之间直接进行焦点传递，使各个UI组件上进行焦点传递方便，用户体验度提高。
本申请实施例提供的焦点控制的装置中未详述的内容，可参照上述实施例提供的焦点控制的方法，本申请实施例提供的焦点控制的装置能够达到的有益效果与上述实施例提供的焦点控制的方法相同，在此不再赘述。
基于相同的发明构思，本申请实施例还提供了一种电子设备，该电子设备的结构示意图如图12所示，该电子设备7000包括至少一个处理器7001、存储器7002和总线7003，至少一个处理器7001均与存储7002电连接；存储器7002被配置用于存储有至少一个计算机可执行指令，处理器7001被配置用于执行该至少一个计算机可执行指令，从而执行如本申请实施例中任意一个实施例或任意一种可选实施方式提供的任意一种焦点控制的方法的步骤。
进一步，处理器7001可以是FPGA(Field－Programmable Gate Array，现场可编程门阵列)或者其它具有逻辑处理能力的器件，如MCU(Microcontroller Unit，微控制单元)、CPU(Central Process Unit，中央处理器)。
应用本申请实施例，至少具有如下有益效果：
接收第一指令；根据第一指令，通过预定的UI焦点处理方式，将第一UI组件包括的超文本标记语言HTML元素上的焦点传递到第二UI组件的HTML元素上；在第二UI组件的HTML元素对应的显示界面上显示焦点的状态，如此，实现了第一UI组件与第二UI组件之间直接进行焦点传递，使各个UI组件上进行焦点传递方便，用户体验度提高。
基于相同的发明构思，本申请实施例还提供了一种计算机可读存储介质，存储有计算机程序，该计算机程序用于被处理器执行时实现本申请实施例中任意一个实施例或任意一种焦点控制的方法的步骤。
本申请实施例提供的计算机可读存储介质包括但不限于任何类型的盘(包括软盘、硬盘、光盘、CD-ROM、和磁光盘)、ROM(Read-Only Memory，只读存储器)、RAM(RandomAccess Memory，随即存储器)、EPROM(Erasable Programmable Read-Only Memory，可擦写可编程只读存储器)、EEPROM(Electrically Erasable Programmable Read-Only Memory，电可擦可编程只读存储器)、闪存、磁性卡片或光线卡片。也就是，可读存储介质包括由设备(例如，计算机)以能够读的形式存储或传输信息的任何介质。
应用本申请实施例，至少具有如下有益效果：
接收第一指令；根据第一指令，通过预定的UI焦点处理方式，将第一UI组件包括的超文本标记语言HTML元素上的焦点传递到第二UI组件的HTML元素上；在第二UI组件的HTML元素对应的显示界面上显示焦点的状态，如此，实现了第一UI组件与第二UI组件之间直接进行焦点传递，使各个UI组件上进行焦点传递方便，用户体验度提高。
本技术领域技术人员可以理解，可以用计算机程序指令来实现这些结构图和/或框图和/或流图中的每个框以及这些结构图和/或框图和/或流图中的框的组合。本技术领域技术人员可以理解，可以将这些计算机程序指令提供给通用计算机、专业计算机或其他可编程数据处理方法的处理器来实现，从而通过计算机或其他可编程数据处理方法的处理器来执行本申请公开的结构图和/或框图和/或流图的框或多个框中指定的方案。
本技术领域技术人员可以理解，本申请中已经讨论过的各种操作、方法、流程中的步骤、措施、方案可以被交替、更改、组合或删除。进一步地，具有本申请中已经讨论过的各种操作、方法、流程中的其他步骤、措施、方案也可以被交替、更改、重排、分解、组合或删除。进一步地，现有技术中的具有与本申请中公开的各种操作、方法、流程中的步骤、措施、方案也可以被交替、更改、重排、分解、组合或删除。
以上所述仅是本申请的部分实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种焦点控制的方法，其特征在于，包括：
接收第一指令；
根据所述第一指令，通过预定的用户界面UI焦点处理方式，将第一UI组件包括的超文本标记语言HTML元素上的焦点传递到第二UI组件的HTML元素上；
在所述第二UI组件的HTML元素对应的显示界面上显示所述焦点的状态。
2.根据权利要求1所述的方法，其特征在于，所述第一指令包括tab按键事件、shift按键加tab按键事件中的至少一项。
3.根据权利要求1所述的方法，其特征在于，所述UI焦点处理方式，包括以下至少一项：
各UI组件之间传递焦点的规则、一个UI组件所包括的多个HTML元素之间传递焦点的规则。
4.根据权利要求2所述的方法，其特征在于，所述根据所述第一指令，通过预定的UI焦点处理方式，将第一UI组件包括的HTML元素上的焦点传递到第二UI组件的HTML元素上，包括：
接收所述第一指令包括的tab按键事件，通过预定的UI焦点处理方式，将所述第一UI组件所包括的HTML元素上的焦点传递到所述第二UI组件的HTML元素上。
5.根据权利要求1所述的方法，其特征在于，所述在所述第二UI组件的HTML元素对应的显示界面上显示所述焦点的状态，包括：
当所述第一UI组件所包括的HTML元素上的焦点传递到所述第二UI组件的HTML元素上，在所述第二UI组件的HTML元素对应的拖动条、输入框中的任意一项上以高亮的方式显示所述焦点的状态。
6.根据权利要求3所述的方法，其特征在于，所述各UI组件之间传递焦点的规则，包括：
确定一个UI组件所处的位置，所述UI组件包括至少一个HTML元素，所述至少一个HTML元素中的一个HTML元素上存在焦点；
根据所述UI组件所处的位置，将所述焦点传递到其他的UI组件所包括的一个HTML元素上。
7.根据权利要求5所述的方法，其特征在于，所述第二UI组件对应的标识名称的显示状态包括不显示、高亮显示中的任意一项。
8.一种焦点控制的装置，其特征在于，包括：
第一处理模块，用于接收第一指令；
第二处理模块，用于根据所述第一指令，通过预定的UI焦点处理方式，将第一UI组件包括的超文本标记语言HTML元素上的焦点传递到第二UI组件的HTML元素上；
第三处理模块，用于在所述第二UI组件的HTML元素对应的显示界面上显示所述焦点的状态。
9.一种电子设备，其特征在于，包括：处理器、存储器；
所述存储器，用于存储计算机程序；
所述处理器，用于通过调用所述计算机程序，执行上述权利要求1-7中任一项所述的焦点控制的方法。
10.一种计算机可读存储介质，其特征在于，存储有计算机程序，所述计算机程序用于被处理器执行时实现如权利要求1-7中任一项所述的焦点控制的方法。
CN201910873013.2A 2019-09-16 2019-09-16 焦点控制的方法、装置、设备及计算机可读存储介质 Active CN111796728B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910873013.2A CN111796728B (zh) 2019-09-16 2019-09-16 焦点控制的方法、装置、设备及计算机可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910873013.2A CN111796728B (zh) 2019-09-16 2019-09-16 焦点控制的方法、装置、设备及计算机可读存储介质

Publications (2)

Publication Number Publication Date
CN111796728A true CN111796728A (zh) 2020-10-20
CN111796728B CN111796728B (zh) 2023-04-07

Family

ID=72805572

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910873013.2A Active CN111796728B (zh) 2019-09-16 2019-09-16 焦点控制的方法、装置、设备及计算机可读存储介质

Country Status (1)

Country Link
CN (1) CN111796728B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2023045745A1 (zh) * 2021-09-27 2023-03-30 华为技术有限公司 多屏系统的控制方法、介质及其电子设备

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101571803A (zh) * 2009-05-31 2009-11-04 青岛海信移动通信技术股份有限公司 移动终端焦点控件的管理方法以及相关装置
CN103309555A (zh) * 2012-10-31 2013-09-18 中兴通讯股份有限公司 基于多窗口的焦点切换的方法及装置
US20140207559A1 (en) * 2013-01-24 2014-07-24 Millennial Media, Inc. System and method for utilizing captured eye data from mobile devices
CN104598248A (zh) * 2015-02-03 2015-05-06 安徽广电信息网络股份有限公司 基于html网页的焦点切换方法
CN106990890A (zh) * 2017-03-02 2017-07-28 微鲸科技有限公司 一种应用于智能显示终端的焦点绘制方法与系统
CN107037945A (zh) * 2016-02-04 2017-08-11 阿里巴巴集团控股有限公司 一种焦点处理方法、装置和智能终端

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101571803A (zh) * 2009-05-31 2009-11-04 青岛海信移动通信技术股份有限公司 移动终端焦点控件的管理方法以及相关装置
CN103309555A (zh) * 2012-10-31 2013-09-18 中兴通讯股份有限公司 基于多窗口的焦点切换的方法及装置
US20140207559A1 (en) * 2013-01-24 2014-07-24 Millennial Media, Inc. System and method for utilizing captured eye data from mobile devices
CN104598248A (zh) * 2015-02-03 2015-05-06 安徽广电信息网络股份有限公司 基于html网页的焦点切换方法
CN107037945A (zh) * 2016-02-04 2017-08-11 阿里巴巴集团控股有限公司 一种焦点处理方法、装置和智能终端
CN106990890A (zh) * 2017-03-02 2017-07-28 微鲸科技有限公司 一种应用于智能显示终端的焦点绘制方法与系统

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2023045745A1 (zh) * 2021-09-27 2023-03-30 华为技术有限公司 多屏系统的控制方法、介质及其电子设备

Also Published As

Publication number Publication date
CN111796728B (zh) 2023-04-07

Similar Documents

Publication Publication Date Title
US9792354B2 (en) Context aware user interface parts
JP5089684B2 (ja) サービス・プログラムを生成する技術
US6681343B1 (en) Debugging device and method as well as storage medium
US10303750B2 (en) Browser-level background page for providing multiple views
US8201140B2 (en) System and method for creating and using graphical object instances in a statechart environment
US20150149951A1 (en) Live previews for multitasking and state management
US8291318B2 (en) Visualizing a mixture of automated and manual steps in a procedure
WO2006107529A2 (en) Method and system for aggregating rules for a property associated with a document element
CN112631924A (zh) 自动化测试方法、装置、计算机设备及存储介质
CN111476017B (zh) 网页表格编辑方法、装置及电子设备
CN111796728B (zh) 焦点控制的方法、装置、设备及计算机可读存储介质
CN111562911A (zh) 一种网页编辑方法、装置及存储介质
CN111309558B (zh) 收集vue框架中事件数据的方法、装置、设备及存储介质
CN113407254A (zh) 表单生成方法、装置、电子设备及存储介质
CN117008906A (zh) 一种多行文本溢出控制方法、装置、设备及存储介质
CN115509668A (zh) 前端页面解析型框架的构建方法、装置、设备及存储介质
CN108182577A (zh) 一种展示付款信息的方法、装置及设备
CN114038460A (zh) 语音指令的推荐方法、装置和电子设备
CN107766117A (zh) 一种界面展示的方法及装置
EP2602712A1 (en) Program-producing device and image control system
CN112416268B (zh) 一种激光打印策略代码显示方法及相关装置
US20090307625A1 (en) Method, device, data carrier and computer program product for representing data in a user interface
EP3966788A1 (en) Method and system for transforming wireframes to as-is screens with responsive behaviour
JP2007193435A (ja) 情報処理端末、プログラム
CN109683883A (zh) 一种流程图设计方法及装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant