CN109814965A - H5页面的处理方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请提供了一种H5页面的处理方法、装置、电子设备及存储介质，以解决H5页面调出的虚拟键盘遮挡输入框的问题。其中方法包括：在检测到进入包括输入框的H5页面时，向Native层发送启动监听指令，启动监听指令用于指示Native层监听对输入框的操作事件；接收Native层在监听到发生对输入框的操作事件时返回的，对输入框的操作事件的事件信息；依据事件信息，确定输入框的目标位置，并将输入框移动至目标位置。本申请设置了H5页面层委托Native层对对输入框的操作事件进行监听，并将事件信息回传给H5页面层，H5页面层依据事件信息确定的输入框的目标位置更加准确，能够避免虚拟键盘遮挡输入框，提升用户体验。

Description

H5页面的处理方法、装置、电子设备及存储介质

技术领域

本申请涉及通信技术领域，特别是涉及一种H5页面的处理方法、装置、电子设备及存储介质。

背景技术

随着移动互联网和智能终端的飞速发展，移动终端逐渐成为人们生活中不可或缺的一部分。随之而来的，各种应用于移动终端上的APP(Application，应用程序)也大量出现。

在APP开发中，APP上的页面实现方式可以使用H5(HyperText Markup Language5，简称HTML5，第五代超文本标记语言)页面。基于H5页面开发的APP具有启动时间短，联网速度快等优点。在使用H5页面时，存在文本输入的场景，用户点击H5页面中的输入框后，可以调出系统的虚拟键盘，用户利用虚拟键盘输入相关内容。但是，当H5页面中的输入框比较靠近页面底部时，调出的虚拟键盘就可能遮挡输入框，影响用户使用。

针对上述问题，由于H5页面无法获取到虚拟键盘的键盘高度，因此通常的做法是提供一个猜测的固定键盘高度，在调出系统的虚拟键盘时，将H5页面中的输入框移动到该固定键盘高度的上方，以避免输入框被虚拟键盘遮挡。

但是，上述猜测的固定键盘高度并不准确，如果实际的键盘高度大于该猜测的固定键盘高度，那么调出的虚拟键盘依然会遮挡输入框。

发明内容

本申请实施例提供一种H5页面的处理方法、装置、电子设备及存储介质，以解决H5页面中调出的虚拟键盘遮挡输入框的问题。

根据本申请实施例的一个方面，提供一种H5页面的处理方法，所述方法包括：在检测到进入包括输入框的H5页面时，向原生Native层发送启动监听指令；所述启动监听指令用于指示所述Native层监听对所述输入框的操作事件；接收所述Native层在监听到发生对所述输入框的操作事件时返回的，所述对所述输入框的操作事件的事件信息；依据所述事件信息，确定所述输入框的目标位置，并将所述输入框移动至所述目标位置。

可选地，所述向Native层发送启动监听指令的步骤，包括：生成携带第一键盘行为参数的启动监听指令；通过JS方式调用所述Native层提供的第一预设接口，将所述启动监听指令发送至所述Native层。

可选地，所述方法还包括：在检测到退出所述H5页面时，向所述Native层发送停止监听指令；所述停止监听指令用于指示所述Native层停止监听对所述输入框的操作事件。

可选地，所述向所述Native层发送停止监听指令的步骤，包括：生成携带第二键盘行为参数的停止监听指令；通过JS方式调用Native层提供的第一预设接口，将所述停止监听指令发送至所述Native层。

可选地，所述事件信息包括事件类型及键盘高度。所述依据所述事件信息，确定所述输入框的目标位置的步骤，包括：在所述事件类型为所述输入框被激活时，确定所述输入框的目标位置为，所述输入框的底边与所述H5页面的底边之间的距离大于或等于所述键盘高度的位置；在所述事件类型为所述输入框进入休眠时，确定所述输入框的目标位置为所述输入框的原始位置。

根据本申请实施例的一个方面，提供一种H5页面的处理方法，所述方法包括：接收H5页面层发送的启动监听指令；所述启动监听指令由所述H5页面层在检测到进入包括输入框的H5页面时发送；响应所述启动监听指令，监听对所述输入框的操作事件；在监听到发生对所述输入框的操作事件时，获取所述对所述输入框的操作事件的事件信息，并将所述事件信息返回至所述H5页面层；所述事件信息作为所述H5页面层确定所述输入框的目标位置，并将所述输入框移动至所述目标位置的依据。

可选地，所述启动监听指令携带第一键盘行为参数，所述第一键盘行为参数包括表征键盘行为的第一字段和表征启动监听的第二字段。所述响应所述启动监听指令，监听对所述输入框的操作事件的步骤，包括：从所述启动监听指令中解析得到所述第一键盘行为参数；查找与所述第一字段关联的目标类中的目标方法，并调用所述目标方法，依据所述第二字段在所述目标方法中监听对所述输入框的操作事件。

可选地，所述方法还包括：接收所述H5页面层发送的停止监听指令；所述停止监听指令由所述H5页面层在检测到退出所述H5页面时发送；响应所述停止监听指令，停止监听对所述输入框的操作事件。

可选地，所述停止监听指令携带第二键盘行为参数，所述第二键盘行为参数包括表征键盘行为的第一字段和表征停止监听的第三字段。所述Native层响应所述停止监听指令，停止监听对所述输入框的操作事件的步骤，包括：从所述停止监听指令中解析得到所述第二键盘行为参数；查找与所述第一字段关联的目标类中的目标方法，并调用所述目标方法，依据所述第三字段在所述目标方法中停止监听对所述输入框的操作事件。

可选地，所述将所述事件信息返回至所述H5页面层的步骤，包括：生成携带回调参数的回调指令；所述回调参数包括所述事件信息；通过JS方式调用所述H5页面层提供的第二预设接口，将所述回调指令发送至所述H5页面层。

根据本申请实施例的一个方面，提供一种H5页面的处理装置，所述装置包括：第一发送模块，用于在检测到进入包括输入框的H5页面时，向原生Native层发送启动监听指令，所述启动监听指令用于指示所述Native层监听对所述输入框的操作事件；信息接收模块，用于接收所述Native层在监听到发生对所述输入框的操作事件时返回的，所述对所述输入框的操作事件的事件信息；确定模块，用于依据所述事件信息，确定所述输入框的目标位置，并将所述输入框移动至所述目标位置。

可选地，所述第一发送模块包括：第一生成单元，用于生成携带第一键盘行为参数的启动监听指令；第一调用单元，用于通过JS方式调用所述Native层提供的第一预设接口，将所述启动监听指令发送至所述Native层。

可选地，所述装置还包括：第二发送模块，用于在检测到退出所述H5页面时，向所述Native层发送停止监听指令；所述停止监听指令用于指示所述Native层停止监听对所述输入框的操作事件。

可选地，所述第二发送模块包括：第二生成单元，用于生成携带第二键盘行为参数的停止监听指令；第二调用单元，用于通过JS方式调用Native层提供的第一预设接口，将所述停止监听指令发送至所述Native层。

可选地，所述事件信息包括事件类型及键盘高度。所述确定模块包括：第一确定单元，用于在所述事件类型为所述输入框被激活时，确定所述输入框的目标位置为，所述输入框的底边与所述H5页面的底边之间的距离大于或等于所述键盘高度的位置；第二确定单元，用于在所述事件类型为所述输入框进入休眠时，确定所述输入框的目标位置为所述输入框的原始位置。

根据本申请实施例的一个方面，提供一种H5页面的处理装置，所述装置包括：第一接收模块，用于接收H5页面层发送的启动监听指令；所述启动监听指令由所述H5页面层在检测到进入包括输入框的H5页面时发送；第一响应模块，用于响应所述启动监听指令，监听对所述输入框的操作事件；返回模块，用于在监听到发生对所述输入框的操作事件时，获取所述对所述输入框的操作事件的事件信息，并将所述事件信息返回至所述H5页面层；所述事件信息作为所述H5页面层确定所述输入框的目标位置，并将所述输入框移动至所述目标位置的依据。

可选地，所述启动监听指令携带第一键盘行为参数，所述第一键盘行为参数包括表征键盘行为的第一字段和表征启动监听的第二字段；所述第一响应模块包括：第一解析单元，用于从所述启动监听指令中解析得到所述第一键盘行为参数；第一执行单元，用于查找与所述第一字段关联的目标类中的目标方法，并调用所述目标方法，依据所述第二字段在所述目标方法中监听对所述输入框的操作事件。

可选地，所述装置还包括：第二接收模块，用于接收所述H5页面层发送的停止监听指令；所述停止监听指令由所述H5页面层在检测到退出所述H5页面时发送；第二响应模块，用于响应所述停止监听指令，停止监听对所述输入框的操作事件。

可选地，所述停止监听指令携带第二键盘行为参数，所述第二键盘行为参数包括表征键盘行为的第一字段和表征停止监听的第三字段；所述第二响应模块包括：第二解析单元，用于从所述停止监听指令中解析得到所述第二键盘行为参数；第二执行单元，用于查找与所述第一字段关联的目标类中的目标方法，并调用所述目标方法，依据所述第三字段在所述目标方法中停止监听对所述输入框的操作事件。

可选地，所述返回模块包括：第三生成单元，用于生成携带回调参数的回调指令；所述回调参数包括所述事件信息；第三调用单元，用于通过JS方式调用所述H5页面层提供的第二预设接口，将所述回调指令发送至所述H5页面层。

根据本申请实施例的再一方面，提供一种电子设备，包括：处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为执行上述任一种H5页面的处理方法。

根据本申请实施例的又一方面，提供一种非临时性计算机可读存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行上述任一种H5页面的处理方法。

在本申请实施例中，建立了H5页面层与Native层之间的通信，H5页面层在检测到进入包括输入框的H5页面时，向Native层发送启动监听指令；Native层响应启动监听指令，监听对输入框的操作事件；Native层在监听到发生对输入框的操作事件时，获取对输入框的操作事件的事件信息，并将事件信息返回至H5页面层；H5页面层依据事件信息，确定输入框的目标位置，并将输入框移动至目标位置。由此可知，本申请实施例中考虑到H5页面层不能直接获取到虚拟键盘的键盘高度，设置了H5页面层委托Native层对输入框的操作事件进行监听，并将事件信息回传给H5页面层，因此H5页面层可以获取实时的事件信息，依据事件信息确定的输入框的目标位置更加准确，能够避免虚拟键盘遮挡输入框，提升用户体验。

附图说明

图1是本申请实施例的一种H5页面的处理方法的步骤流程图。

图2是本申请实施例的又一种H5页面的处理方法的步骤流程图。

图3是本申请实施例的再一种H5页面的处理方法的步骤流程图。

图4是本申请实施例的一种H5页面的处理装置的结构框图。

图5是本申请实施例的又一种H5页面的处理装置的结构框图。

图6是本申请实施例的一种用于H5页面的处理的装置的框图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请实施例可以应用于移动终端的APP上。移动终端可以为手机、平板电脑、可穿戴设备，等等。移动终端的操作系统可以为IOS系统、Android系统，等等。

参照图1，示出了本申请实施例的一种H5页面的处理方法的步骤流程图。本申请实施例的H5页面的处理方法可以由H5页面层执行。

本申请实施例的H5页面的处理方法包括以下步骤：

步骤101，在检测到进入包括输入框的H5页面时，向Native层发送启动监听指令。

用户在启动APP后，可以进入H5页面。在APP中可以具有不同类型的H5页面，比如，一种类型为输入型的H5页面，该种类型的H5页面中包括输入框；一种类型为显示型的H5页面，该种类型的H5页面中不包括输入框，等等。

本申请实施例中，APP基于混合模式开发，混合模式是指APP的架构中既包括H5页面层，也包括Native(原生)层。H5页面层可以执行与H5页面相关的底层操作，比如，检测进入H5页面，检测退出H5页面，解析H5页面的内容等操作。Native层可以执行监听对所述输入框的操作事件，获取事件信息等操作。预先定义H5页面层与Native层之间的通信协议，H5页面层与Native层可以基于该通信协议进行双向通信。

H5页面层在检测到进入H5页面时，可以解析H5页面的内容，以便确定该H5页面中是否包括输入框。比如，H5页面层可以解析用于描述H5页面内容部分的代码，查找其中是否包括描述输入框的代码，如果包括则确定H5页面中包括输入框。

对于包括输入框的H5页面，为了避免在调出虚拟键盘时遮挡H5页面中的输入框，可以确定虚拟键盘的键盘高度等键盘信息，在显示H5页面时依据这些信息调整输入框的位置。考虑到H5页面层无法直接获取到键盘信息，而Native层可以获取，所以设置了H5页面层将获取键盘信息的任务委托给Native层执行。因此，H5页面层在检测到进入包括输入框的H5页面时，可以基于H5页面层与Native层之间的通信协议，向Native层发送启动监听指令，以便指示Native层开始监听对所述输入框的操作事件。

对于不包括输入框的H5页面，H5页面层在检测到进入不包括输入框的H5页面时，可以不作如上针对包括输入框的H5页面的处理，按照H5页面的原始形式显示H5页面即可。

步骤102，接收所述Native层在监听到发生对所述输入框的操作事件时返回的，所述对所述输入框的操作事件的事件信息。

Native层在接收到启动监听指令后，可以响应该启动监听指令，开始监听对所述输入框的操作事件。在输入框被激活，或者输入框进入休眠时，均可触发对应的对输入框的操作事件，Native层即可监听到对应的对输入框的操作事件。

Native层在监听到发生对所述输入框的操作事件时，可以获取该对所述输入框的操作事件的事件信息。事件信息可以包括事件类型及键盘高度等信息。比如，在激活输入框时，对所述输入框的操作事件的事件类型为输入框被激活，键盘高度为虚拟键盘的实际高度；在令输入框休眠时，对所述输入框的操作事件的事件类型为输入框进入休眠，键盘高度为零。

Native层可以基于H5页面层与Native层之间的通信协议，将监听到的对所述输入框的操作事件的事件信息返回至H5页面层。

步骤103，依据所述事件信息，确定所述输入框的目标位置，并将所述输入框移动至所述目标位置。

H5页面层依据事件信息可以确定出输入框的目标位置，该目标位置为能够避免调出的虚拟键盘遮挡输入框的位置，因此H5页面层可以将H5页面中的输入框移动至目标位置。

本申请实施例中考虑到H5页面层不能直接获取到虚拟键盘的键盘高度，设置了H5页面层委托Native层对输入框的操作事件进行监听，并将事件信息回传给H5页面层，因此H5页面层可以获取实时的事件信息，依据事件信息确定的输入框的目标位置更加准确，能够避免虚拟键盘遮挡输入框，提升用户体验。

参照图2，示出了本申请实施例的一种H5页面的处理方法的步骤流程图。本申请实施例的H5页面的处理方法可以由Native层执行。

本申请实施例的H5页面的处理方法包括以下步骤：

步骤201，接收H5页面层发送的启动监听指令；所述启动监听指令由所述H5页面层在检测到进入包括输入框的H5页面时发送。

H5页面层在检测到进入包括输入框的H5页面时，将向Native层发送启动监听指令。Native层接收H5页面层发送的启动监听指令。

步骤202，响应所述启动监听指令，监听对所述输入框的操作事件。

Native层在接收到启动监听指令后，可以响应该启动监听指令，开始监听对所述输入框的操作事件。

步骤203，在监听到发生对所述输入框的操作事件时，获取所述对所述输入框的操作事件的事件信息，并将所述事件信息返回至所述H5页面层。

Native层在监听到发生对所述输入框的操作事件时，可以获取该对所述输入框的操作事件的事件信息，并基于H5页面层与Native层之间的通信协议，将监听到的对所述输入框的操作事件的事件信息返回至H5页面层。该事件信息可以作为H5页面层确定所述输入框的目标位置，并将输入框移动至目标位置的依据。

参照图3，示出了本申请实施例的一种H5页面的处理方法的步骤流程图。本申请实施例从整体描述H5页面的处理方法。

本申请实施例的H5页面的处理方法包括以下步骤：

步骤301，H5页面层在检测到进入包括输入框的H5页面时，向Native层发送启动监听指令。

在H5页面层与Native层之间的通信协议中，可以设置键盘行为参数(keyboardAction)和回调参数(callBack)。其中，keyboardAction为H5页面层向Native层发送信息的参数，callBack为Native层向H5页面层发送信息的参数。

H5页面层向Native层发送启动监听指令的步骤可以包括：H5页面层生成携带第一键盘行为参数的启动监听指令；H5页面层通过JS(JavaScript)方式调用Native层提供的第一预设接口，将启动监听指令发送至Native层。

第一键盘行为参数可以用于指示开始监听对所述输入框的操作事件。第一键盘行为参数可以为字符串形式，可以包括表征键盘行为的第一字段和表征启动监听的第二字段。当然，启动监听指令中还可以携带一些其他信息，如H5页面的描述信息等，这些信息可以统一组成URL(Uniform Resource Locator，统一资源定位符)的形式，也即URL中添加第一键盘行为参数。

Native层上可以提供第一预设接口，该第一预设接口为H5页面层向Native层发送信息的接口。H5页面层可以通过JS方式调用第一预设接口，将启动监听指令发送至Native层。JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作等。

步骤302，Native层接收H5页面层发送的启动监听指令，并响应所述启动监听指令，监听对所述输入框的操作事件。

在Native层中可以包括一个或多个类，每个类中可以包括一个或多个方法。类是一种复杂的数据类型，它是将不同类型的数据和与这些数据相关的操作封装在一起的集合体，其中“与数据相关的操作”表示方法。

在Native层中可以预先设置用于处理本申请实施例中，Native层所执行步骤的类及方法，并将表征键盘行为的第一字段与设置的类及方法进行关联，因此通过第一字段即可查找到该类及方法。

Native层响应所述启动监听指令，监听对所述输入框的操作事件的步骤可以包括：Native层从启动监听指令中解析得到第一键盘行为参数；Native层查找与第一字段关联的目标类中的目标方法，并调用目标方法，依据第二字段在目标方法中监听对所述输入框的操作事件。

Native层从启动监听指令中提取出第一字段和第二字段，根据第一字段可以查找到目标类中的目标方法，调用目标方法并输入第二字段，目标方法得到第二字段即可确定开始监听对所述输入框的操作事件。

步骤303，Native层在监听到发生对所述输入框的操作事件时，获取所述对所述输入框的操作事件的事件信息，并将所述事件信息返回至所述H5页面层。

Native层在监听到发生对所述输入框的操作事件时，可以获取对所述输入框的操作事件的事件信息。事件信息可以包括事件类型及键盘高度等信息。

当用户在H5页面上点击输入框使其激活时，可以触发对所述输入框的操作事件，此种情况下事件类型为输入框被激活，键盘高度为虚拟键盘的实际高度。当用户在H5页面上点击输入框之外的其它位置时，也可以触发对所述输入框的操作事件，此种情况下事件类型为输入框进入休眠，键盘高度为零。当用户在H5页面上切换键盘时，也可以触发对所述输入框的操作事件，此种情况下事件类型为输入框被激活，键盘高度为切换后的虚拟键盘的实际高度。

Native层将事件信息返回至H5页面层的步骤可以包括：Native层生成携带回调参数的回调指令，回调参数包括所述事件信息；Native层通过JS方式调用H5页面层提供的第二预设接口，将回调指令发送至H5页面层。

回调参数可以为字符串形式，可以包括事件类型字段和键盘高度字段。当然，回调指令中还可以携带一些其他信息，如Native层的描述信息等，这些信息可以统一组成URL的形式，也即URL中添加事件信息。

H5页面层上可以提供第二预设接口，该第二预设接口为Native层向H5页面层发送信息的接口。Native层可以通过JS方式调用第二预设接口，将回调指令发送至H5页面层。

步骤304，H5页面层接收所述Native层在监听到发生对所述输入框的操作事件时返回的，对所述输入框的操作事件的事件信息，并依据所述事件信息，确定所述输入框的目标位置，并将所述输入框移动至所述目标位置。

H5页面层接收到回调指令后，可以从回调指令中解析得到对所述输入框的操作事件的事件信息，也即从回调指令中提取出事件类型字段和键盘高度字段。H5页面层依据事件信息，调整输入框的位置。

H5页面层依据事件信息，确定输入框的目标位置的步骤可以包括：H5页面层在事件类型为输入框被激活时，确定输入框的目标位置为，输入框的底边与H5页面的底边之间的距离大于或等于键盘高度的位置；H5页面层在事件类型为输入框进入休眠时，确定输入框的目标位置为输入框的原始位置。

比如，事件类型为输入框被激活，键盘高度为3cm，则确定输入框的目标位置为，输入框的底边与H5页面的底边之间的距离大于或等于3cm的位置，如输入框的底边与H5页面的底边之间的距离为4cm的位置等。

为了进一步提升用户体验，可以设置目标位置为，输入框的底边与H5页面的底边之间的距离等于键盘高度的位置，以使输入框的底边与虚拟键盘更加贴合。

比如，事件类型为输入框进入休眠，键盘高度为0，则确定输入框的目标位置为输入框的原始位置，比如原始位置为输入框的底边与H5页面的底边之间的距离为2cm的位置等。

H5页面层确定出输入框的目标位置，将输入框移动至该目标位置，从而能够避免在调出虚拟键盘时遮挡输入框，能够在收起虚拟键盘时将输入框移动回原始位置。

步骤305，H5页面层在检测到退出所述H5页面时，向所述Native层发送停止监听指令。

Native层可以持续监听对所述输入框的操作事件，因此为了节省资源，H5页面层在检测到退出之前进入的H5页面时，可以向Native层发送停止监听指令。停止监听指令用于指示所述Native层停止监听对所述输入框的操作事件。

H5页面层向Native层发送停止监听指令的步骤可以包括：H5页面层生成携带第二键盘行为参数的停止监听指令；H5页面层通过JS方式调用Native层提供的第一预设接口，将停止监听指令发送至Native层。

第二键盘行为参数可以用于指示停止监听对所述输入框的操作事件。第二键盘行为参数可以为字符串形式，可以包括表征键盘行为的第一字段和表征停止监听的第三字段。当然，停止监听指令中还可以携带一些其他信息，如H5页面的描述信息等，这些信息可以统一组成URL的形式，也即URL中添加第二键盘行为参数。

步骤306，Native层接收所述H5页面层发送的停止监听指令，并响应所述停止监听指令，停止监听对所述输入框的操作事件。

Native层响应停止监听指令，停止监听对所述输入框的操作事件的步骤可以包括：Native层从停止监听指令中解析得到第二键盘行为参数；Native层查找与第一字段关联的目标类中的目标方法，并调用目标方法，依据第三字段在目标方法中停止监听对所述输入框的操作事件。

Native层从停止监听指令中提取出第一字段和第三字段，根据第一字段可以查找到目标类中的目标方法，调用目标方法并输入第三字段，目标方法得到第三字段即可确定停止监听对所述输入框的操作事件。

本发明实施例中，H5页面层可以通过Native层获取实际键盘高度，依据实际键盘高度对输入框的位置进行调整，可以解决虚拟键盘遮挡输入框的问题，提高开发效率，提升用户体验。并且在退出H5页面时，Native层可以及时停止监听对输入框的操作事件，从而避免资源的浪费。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请实施例并不受所描述的动作顺序的限制，因为依据本申请实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本申请实施例所必须的。

参照图4，示出了本申请实施例的一种H5页面的处理装置的结构框图。本申请实施例的H5页面的处理装置可以位于H5页面层。

其中，所述装置包括：

第一发送模块401，用于在检测到进入包括输入框的H5页面时，向原生Native层发送启动监听指令。所述启动监听指令用于指示所述Native层监听对所述输入框的操作事件。

信息接收模块402，用于接收所述Native层在监听到发生对所述输入框的操作事件时返回的，所述对所述输入框的操作事件的事件信息。

确定模块403，用于依据所述事件信息，确定所述输入框的目标位置，并将所述输入框移动至所述目标位置。

在一种可选实施方式中，所述第一发送模块401包括：第一生成单元，用于生成携带第一键盘行为参数的启动监听指令；第一调用单元，用于通过JS方式调用所述Native层提供的第一预设接口，将所述启动监听指令发送至所述Native层。

在一种可选实施方式中，所述装置还包括：第二发送模块，用于在检测到退出所述H5页面时，向所述Native层发送停止监听指令；所述停止监听指令用于指示所述Native层停止监听对所述输入框的操作事件。

在一种可选实施方式中，所述第二发送模块包括：第二生成单元，用于生成携带第二键盘行为参数的停止监听指令；第二调用单元，用于通过JS方式调用Native层提供的第一预设接口，将所述停止监听指令发送至所述Native层。

在一种可选实施方式中，所述事件信息包括事件类型及键盘高度。所述确定模块403包括：第一确定单元，用于在所述事件类型为所述输入框被激活时，确定所述输入框的目标位置为，所述输入框的底边与所述H5页面的底边之间的距离大于或等于所述键盘高度的位置；第二确定单元，用于在所述事件类型为所述输入框进入休眠时，确定所述输入框的目标位置为所述输入框的原始位置。

参照图5，示出了本申请实施例的一种H5页面的处理装置的结构框图。本申请实施例的H5页面的处理装置可以位于Native层。

其中，所述装置包括：

第一接收模块501，用于接收H5页面层发送的启动监听指令。所述启动监听指令由所述H5页面层在检测到进入包括输入框的H5页面时发送。

第一响应模块502，用于响应所述启动监听指令，监听对所述输入框的操作事件。

返回模块503，用于在监听到发生对所述输入框的操作事件时，获取所述对所述输入框的操作事件的事件信息，并将所述事件信息返回至所述H5页面层。所述事件信息作为所述H5页面层确定所述输入框的目标位置，并将所述输入框移动至所述目标位置的依据。

在一种可选实施方式中，所述启动监听指令携带第一键盘行为参数，所述第一键盘行为参数包括表征键盘行为的第一字段和表征启动监听的第二字段。所述第一响应模块502包括：第一解析单元，用于从所述启动监听指令中解析得到所述第一键盘行为参数；第一执行单元，用于查找与所述第一字段关联的目标类中的目标方法，并调用所述目标方法，依据所述第二字段在所述目标方法中监听对所述输入框的操作事件。

在一种可选实施方式中，所述装置还包括：第二接收模块，用于接收所述H5页面层发送的停止监听指令，所述停止监听指令由所述H5页面层在检测到退出所述H5页面时发送；第二响应模块，用于响应所述停止监听指令，停止监听对所述输入框的操作事件。

在一种可选实施方式中，所述停止监听指令携带第二键盘行为参数，所述第二键盘行为参数包括表征键盘行为的第一字段和表征停止监听的第三字段。所述第二响应模块包括：第二解析单元，用于从所述停止监听指令中解析得到所述第二键盘行为参数；第二执行单元，用于查找与所述第一字段关联的目标类中的目标方法，并调用所述目标方法，依据所述第三字段在所述目标方法中停止监听对所述输入框的操作事件。

在一种可选实施方式中，所述返回模块503包括：第三生成单元，用于生成携带回调参数的回调指令；所述回调参数包括所述事件信息；第三调用单元，用于通过JS方式调用所述H5页面层提供的第二预设接口，将所述回调指令发送至所述H5页面层。

本发明实施例中，H5页面层可以通过Native层获取实际键盘高度，依据实际键盘高度对输入框的位置进行调整，可以解决虚拟键盘遮挡输入框的问题，提高开发效率，提升用户体验。并且在退出H5页面时，Native层可以及时停止监听对输入框的操作事件，从而避免资源的浪费。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图6是本申请实施例的一种用于H5页面的处理的装置的框图。例如，装置600可以被提供为一电子设备。例如，电子设备可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图6，装置600可以包括以下一个或多个组件：处理组件602，存储器604，电力组件606，多媒体组件608，音频组件610，输入/输出(I/O)的接口612，传感器组件614，以及通信组件616。

处理组件602通常控制装置600的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件602可以包括一个或多个处理器620来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件602可以包括一个或多个模块，便于处理组件602和其他组件之间的交互。例如，处理组件602可以包括多媒体模块，以方便多媒体组件608和处理组件602之间的交互。

存储器604被配置为存储各种类型的数据以支持在设备600的操作。这些数据的示例包括用于在装置600上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器604可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件606为装置600的各种组件提供电力。电源组件606可以包括电源管理系统，一个或多个电源，及其他与为装置600生成、管理和分配电力相关联的组件。

多媒体组件608包括在所述装置600和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件608包括一个前置摄像头和/或后置摄像头。当设备600处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件610被配置为输出和/或输入音频信号。例如，音频组件610包括一个麦克风(MIC)，当装置600处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器604或经由通信组件616发送。在一些实施例中，音频组件610还包括一个扬声器，用于输出音频信号。

I/O接口612为处理组件602和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件614包括一个或多个传感器，用于为装置600提供各个方面的状态评估。例如，传感器组件614可以检测到设备600的打开/关闭状态，组件的相对定位，例如所述组件为装置600的显示器和小键盘，传感器组件614还可以检测装置600或装置600一个组件的位置改变，用户与装置600接触的存在或不存在，装置600方位或加速/减速和装置600的温度变化。传感器组件614可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件614还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件614还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件616被配置为便于装置600和其他设备之间有线或无线方式的通信。装置600可以接入基于通信标准的无线网络，如WiFi，运营商网络(如2G、3G、4G或5G)，或它们的组合。在一个示例性实施例中，通信组件616经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件616还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，装置600可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述H5页面的处理方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器604，上述指令可由装置600的处理器620执行以完成上述H5页面的处理方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本申请实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本申请实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请实施例是参照根据本申请实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本申请所提供的一种H5页面的处理方法和一种H5页面的处理方法、装置、电子设备及存储介质，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (22)

1.一种H5页面的处理方法，其特征在于，所述方法包括：

在检测到进入包括输入框的H5页面时，向原生Native层发送启动监听指令；所述启动监听指令用于指示所述Native层监听对所述输入框的操作事件；

接收所述Native层在监听到发生对所述输入框的操作事件时返回的，所述对所述输入框的操作事件的事件信息；

依据所述事件信息，确定所述输入框的目标位置，并将所述输入框移动至所述目标位置。

2.根据权利要求1所述的H5页面的处理方法，其特征在于，所述向Native层发送启动监听指令的步骤，包括：

生成携带第一键盘行为参数的启动监听指令；

通过JS方式调用所述Native层提供的第一预设接口，将所述启动监听指令发送至所述Native层。

3.根据权利要求1所述的H5页面的处理方法，其特征在于，所述方法还包括：

在检测到退出所述H5页面时，向所述Native层发送停止监听指令；所述停止监听指令用于指示所述Native层停止监听对所述输入框的操作事件。

4.根据权利要求3所述的H5页面的处理方法，其特征在于，所述向所述Native层发送停止监听指令的步骤，包括：

生成携带第二键盘行为参数的停止监听指令；

通过JS方式调用Native层提供的第一预设接口，将所述停止监听指令发送至所述Native层。

5.根据权利要求1所述的H5页面的处理方法，其特征在于，所述事件信息包括事件类型及键盘高度；

所述依据所述事件信息，确定所述输入框的目标位置的步骤，包括：

在所述事件类型为所述输入框被激活时，确定所述输入框的目标位置为，所述输入框的底边与所述H5页面的底边之间的距离大于或等于所述键盘高度的位置；

在所述事件类型为所述输入框进入休眠时，确定所述输入框的目标位置为所述输入框的原始位置。

6.一种H5页面的处理方法，其特征在于，所述方法包括：

接收H5页面层发送的启动监听指令；所述启动监听指令由所述H5页面层在检测到进入包括输入框的H5页面时发送；

响应所述启动监听指令，监听对所述输入框的操作事件；

在监听到发生对所述输入框的操作事件时，获取所述对所述输入框的操作事件的事件信息，并将所述事件信息返回至所述H5页面层；所述事件信息作为所述H5页面层确定所述输入框的目标位置，并将所述输入框移动至所述目标位置的依据。

7.根据权利要求6所述的H5页面的处理方法，其特征在于，所述启动监听指令携带第一键盘行为参数，所述第一键盘行为参数包括表征键盘行为的第一字段和表征启动监听的第二字段；

所述响应所述启动监听指令，监听对所述输入框的操作事件的步骤，包括：

从所述启动监听指令中解析得到所述第一键盘行为参数；

查找与所述第一字段关联的目标类中的目标方法，并调用所述目标方法，依据所述第二字段在所述目标方法中监听对所述输入框的操作事件。

8.根据权利要求6所述的H5页面的处理方法，其特征在于，所述方法还包括：

接收所述H5页面层发送的停止监听指令；所述停止监听指令由所述H5页面层在检测到退出所述H5页面时发送；

响应所述停止监听指令，停止监听对所述输入框的操作事件。

9.根据权利要求8所述的H5页面的处理方法，其特征在于，所述停止监听指令携带第二键盘行为参数，所述第二键盘行为参数包括表征键盘行为的第一字段和表征停止监听的第三字段；

所述响应所述停止监听指令，停止监听对所述输入框的操作事件的步骤，包括：

从所述停止监听指令中解析得到所述第二键盘行为参数；

查找与所述第一字段关联的目标类中的目标方法，并调用所述目标方法，依据所述第三字段在所述目标方法中停止监听对所述输入框的操作事件。

10.根据权利要求6所述的H5页面的处理方法，其特征在于，所述将所述事件信息返回至所述H5页面层的步骤，包括：

生成携带回调参数的回调指令；所述回调参数包括所述事件信息；

通过JS方式调用所述H5页面层提供的第二预设接口，将所述回调指令发送至所述H5页面层。

11.一种H5页面的处理装置，其特征在于，所述装置包括：

第一发送模块，用于在检测到进入包括输入框的H5页面时，向原生Native层发送启动监听指令；所述启动监听指令用于指示所述Native层监听对所述输入框的操作事件；

信息接收模块，用于接收所述Native层在监听到发生对所述输入框的操作事件时返回的，所述对所述输入框的操作事件的事件信息；

确定模块，用于依据所述事件信息，确定所述输入框的目标位置，并将所述输入框移动至所述目标位置。

12.根据权利要求11所述的H5页面的处理装置，其特征在于，所述第一发送模块包括：

第一生成单元，用于生成携带第一键盘行为参数的启动监听指令；

第一调用单元，用于通过JS方式调用所述Native层提供的第一预设接口，将所述启动监听指令发送至所述Native层。

13.根据权利要求11所述的H5页面的处理装置，其特征在于，所述装置还包括：

第二发送模块，用于在检测到退出所述H5页面时，向所述Native层发送停止监听指令；所述停止监听指令用于指示所述Native层停止监听对所述输入框的操作事件。

14.根据权利要求13所述的H5页面的处理装置，其特征在于，所述第二发送模块包括：

第二生成单元，用于生成携带第二键盘行为参数的停止监听指令；

第二调用单元，用于通过JS方式调用Native层提供的第一预设接口，将所述停止监听指令发送至所述Native层。

15.根据权利要求11所述的H5页面的处理装置，其特征在于，所述事件信息包括事件类型及键盘高度；

所述确定模块包括：

第一确定单元，用于在所述事件类型为所述输入框被激活时，确定所述输入框的目标位置为，所述输入框的底边与所述H5页面的底边之间的距离大于或等于所述键盘高度的位置；

第二确定单元，用于在所述事件类型为所述输入框进入休眠时，确定所述输入框的目标位置为所述输入框的原始位置。

16.一种H5页面的处理装置，其特征在于，所述装置包括：

第一接收模块，用于接收H5页面层发送的启动监听指令；所述启动监听指令由所述H5页面层在检测到进入包括输入框的H5页面时发送；

第一响应模块，用于响应所述启动监听指令，监听对所述输入框的操作事件；

返回模块，用于在监听到发生对所述输入框的操作事件时，获取所述对所述输入框的操作事件的事件信息，并将所述事件信息返回至所述H5页面层；所述事件信息作为所述H5页面层确定所述输入框的目标位置，并将所述输入框移动至所述目标位置的依据。

17.根据权利要求16所述的H5页面的处理装置，其特征在于，所述启动监听指令携带第一键盘行为参数，所述第一键盘行为参数包括表征键盘行为的第一字段和表征启动监听的第二字段；

所述第一响应模块包括：

第一解析单元，用于从所述启动监听指令中解析得到所述第一键盘行为参数；

第一执行单元，用于查找与所述第一字段关联的目标类中的目标方法，并调用所述目标方法，依据所述第二字段在所述目标方法中监听对所述输入框的操作事件。

18.根据权利要求16所述的H5页面的处理装置，其特征在于，所述装置还包括：

第二接收模块，用于接收所述H5页面层发送的停止监听指令；所述停止监听指令由所述H5页面层在检测到退出所述H5页面时发送；

第二响应模块，用于响应所述停止监听指令，停止监听对所述输入框的操作事件。

19.根据权利要求18所述的H5页面的处理装置，其特征在于，所述停止监听指令携带第二键盘行为参数，所述第二键盘行为参数包括表征键盘行为的第一字段和表征停止监听的第三字段；

所述第二响应模块包括：

第二解析单元，用于从所述停止监听指令中解析得到所述第二键盘行为参数；

第二执行单元，用于查找与所述第一字段关联的目标类中的目标方法，并调用所述目标方法，依据所述第三字段在所述目标方法中停止监听对所述输入框的操作事件。

20.根据权利要求16所述的H5页面的处理装置，其特征在于，所述返回模块包括：

第三生成单元，用于生成携带回调参数的回调指令；所述回调参数包括所述事件信息；

第三调用单元，用于通过JS方式调用所述H5页面层提供的第二预设接口，将所述回调指令发送至所述H5页面层。

21.一种电子设备，其特征在于，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为执行如权利要求1-10任一项所述的H5页面的处理方法。

22.一种非临时性计算机可读存储介质，其特征在于，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如权利要求1-10任一项所述的H5页面的处理方法。