[发明专利]H5页面的处理方法、装置、电子设备及存储介质

说明书

本申请提供了一种H5页面的处理方法、装置、电子设备及存储介质，以解决H5页面调出的虚拟键盘遮挡输入框的问题。其中方法包括：在检测到进入包括输入框的H5页面时，向Native层发送启动监听指令，启动监听指令用于指示Native层监听对输入框的操作事件；接收Native层在监听到发生对输入框的操作事件时返回的，对输入框的操作事件的事件信息；依据事件信息，确定输入框的目标位置，并将输入框移动至目标位置。本申请设置了H5页面层委托Native层对对输入框的操作事件进行监听，并将事件信息回传给H5页面层，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页面的底边之间的距离大于或等于所述键盘高度的位置；在所述事件类型为所述输入框进入休眠时，确定所述输入框的目标位置为所述输入框的原始位置。