CN118092776A - 页面元素展示方法、装置、电子设备及存储介质 - Google Patents
页面元素展示方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN118092776A CN118092776A CN202311402230.6A CN202311402230A CN118092776A CN 118092776 A CN118092776 A CN 118092776A CN 202311402230 A CN202311402230 A CN 202311402230A CN 118092776 A CN118092776 A CN 118092776A
- Authority
- CN
- China
- Prior art keywords
- soft keyboard
- page
- height
- determining
- target
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 43
- 238000012544 monitoring process Methods 0.000 claims abstract description 30
- 238000013508 migration Methods 0.000 claims abstract description 22
- 230000005012 migration Effects 0.000 claims abstract description 22
- 230000008859 change Effects 0.000 claims abstract description 17
- 238000004590 computer program Methods 0.000 claims description 12
- 230000004044 response Effects 0.000 claims description 12
- 238000012790 confirmation Methods 0.000 claims description 8
- 230000000007 visual effect Effects 0.000 claims description 6
- 238000012545 processing Methods 0.000 abstract description 24
- 238000013473 artificial intelligence Methods 0.000 abstract description 7
- 238000011161 development Methods 0.000 abstract description 4
- 238000010586 diagram Methods 0.000 description 9
- 238000005516 engineering process Methods 0.000 description 9
- 238000004891 communication Methods 0.000 description 8
- 230000000694 effects Effects 0.000 description 4
- 230000006870 function Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 230000003993 interaction Effects 0.000 description 2
- 238000010801 machine learning Methods 0.000 description 2
- 238000012856 packing Methods 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013135 deep learning Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000003058 natural language processing Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 230000001953 sensory effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本公开提供了页面元素展示方法、装置、电子设备及存储介质,涉及网页开发以及数据处理等人工智能领域。其中的方法可包括:监听页面的视口高度变化,所述页面为移动终端的屏幕上所展示的页面;响应于根据监听结果确定软键盘打开,将位于软键盘遮挡住的页面区域中的DOM元素作为候选元素,从候选元素中确定出需要进行位置迁移的DOM元素,作为目标元素;将目标元素从原始展示位置迁移到软键盘未遮挡住的页面区域中进行展示。应用本公开所述方案,可降低时间成本及提升处理效率等。
Description
技术领域
本公开涉及人工智能技术领域,特别涉及网页开发以及数据处理等领域的页面元素展示方法、装置、电子设备及存储介质。
背景技术
随着技术的发展,手机、平板电脑等移动终端得到了越来越广泛的应用。移动终端通常采用安卓(Android)操作系统或移动操作系统(IOS,iPhone Operating System)。用户可基于移动终端的屏幕上展示的页面执行各种操作,如可在所展示的页面的输入框中进行文字信息输入,以便进行信息搜索或信息录入等。
发明内容
本公开提供了页面元素展示方法、装置、电子设备及存储介质。
一种页面元素展示方法,包括:
监听页面的视口高度变化,所述页面为移动终端的屏幕上所展示的页面;
响应于根据监听结果确定软键盘打开,将位于所述软键盘遮挡住的页面区域中的文档对象模型元素作为候选元素,从所述候选元素中确定出需要进行位置迁移的文档对象模型元素,作为目标元素;
将所述目标元素从原始展示位置迁移到所述软键盘未遮挡住的页面区域中进行展示。
一种页面元素展示装置,包括:监听模块、确定模块以及迁移模块;
所述监听模块,用于监听页面的视口高度变化,所述页面为移动终端的屏幕上所展示的页面;
所述确定模块,用于响应于根据监听结果确定软键盘打开,将位于所述软键盘遮挡住的页面区域中的文档对象模型元素作为候选元素,从所述候选元素中确定出需要进行位置迁移的文档对象模型元素,作为目标元素;
所述迁移模块,用于将所述目标元素从原始展示位置迁移到所述软键盘未遮挡住的页面区域中进行展示。
一种电子设备,包括:
至少一个处理器;以及
与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行如以上所述的方法。
一种存储有计算机指令的非瞬时计算机可读存储介质,所述计算机指令用于使计算机执行如以上所述的方法。
一种计算机程序产品,包括计算机程序/指令,所述计算机程序/指令被处理器执行时实现如以上所述的方法。
应当理解,本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征,也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。
附图说明
附图用于更好地理解本方案,不构成对本公开的限定。其中:
图1为本公开所述页面元素展示方法第一实施例的流程图;
图2为本公开所述页面元素展示方法第二实施例的流程图;
图3为本公开所述未打开软键盘之前的页面示意图;
图4为本公开所述打开软键盘之后的目标元素展示位置示意图;
图5为本公开所述页面元素展示装置实施例500的组成结构示意图;
图6示出了可以用来实施本公开的实施例的电子设备600的示意性框图。
具体实施方式
以下结合附图对本公开的示范性实施例做出说明,其中包括本公开实施例的各种细节以助于理解,应当将它们认为仅仅是示范性的。因此,本领域普通技术人员应当认识到,可以对这里描述的实施例做出各种改变和修改,而不会背离本公开的范围和精神。同样,为了清楚和简明,以下的描述中省略了对公知功能和结构的描述。
另外,应理解,本文中术语“和/或”,仅仅是一种描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。另外,本文中字符“/”,一般表示前后关联对象是一种“或”的关系。
图1为本公开所述页面元素展示方法第一实施例的流程图。如图1所示,包括以下具体实现方式。
在步骤101中,监听页面的视口高度变化,所述页面为移动终端的屏幕上所展示的页面。
在步骤102中,响应于根据监听结果确定软键盘打开,将位于软键盘遮挡住的页面区域中的文档对象模型(DOM,Document ObjectModel)元素作为候选元素,并从候选元素中确定出需要进行位置迁移的DOM元素,作为目标元素。
在步骤103中,将目标元素从原始展示位置迁移到软键盘未遮挡住的页面区域中进行展示。
传统方式中,当用户需要在所展示的页面的输入框中进行文字信息输入时,可首先点击所述输入框,然后基于打开的软键盘进行文字信息输入,相应地,打开的软键盘会遮挡住页面中原本展示的部分DOM元素,如展示在页面最下方的确认按钮等,那么对于用户来说,完成文字信息输入之后,还需要手动收起软键盘,然后才能点击确认按钮,以便对输入的文字信息进行提交,从实现上来说比较繁琐,进而增大了时间成本并降低了处理效率等。
而采用上述方法实施例所述方案,在通过监听页面的视口高度变化确定出软键盘打开之后,可将软键盘遮挡住的页面区域中的目标元素迁移到软键盘未遮挡住的页面区域中进行展示,从而使得用户无需执行收起软键盘操作,即可直接对目标元素进行操作,进而降低了实现复杂度,并降低了时间成本及提升了处理效率等。
移动终端的屏幕上可展示各种页面,页面中可包括各种DOM元素,所述DOM元素可以是指超文本标记语言5(HTML5,HyperText Mark-up Language 5)DOM元素。
相应地,可实时监听页面的视口高度变化,并可根据监听结果确定软键盘是否打开。优选地,响应于确定监听到的视口高度与页面内容高度不一致,可确定软键盘打开。
正常情况下,视口高度与页面内容高度是一致的,而软键盘的打开会导致视口高度与页面内容高度不一致,那么相应地,一旦确定视口高度与页面内容高度不一致,则可确定软键盘打开。
通过上述处理,可高效准确地确定出软键盘的打开时机,从而为后续处理奠定了良好的基础。
在确定软键盘打开之后,可将位于软键盘遮挡住的页面区域中的DOM元素作为候选元素,并可从候选元素中确定出需要进行位置迁移的DOM元素,作为目标元素。
优选地,可从候选元素中选出与软键盘对应的用户操作相关的DOM元素,作为目标元素,所述用户操作为触发软键盘打开、需要使用软键盘进行文字信息输入的操作。
另外,优选地,所述目标元素可包括:用于指示对输入的文字信息进行提交的确认按钮。
比如,用户需要在输入框中输入文字信息,那么会打开软键盘,利用软键盘完成文字信息输入之后,还需要点击确认按钮来对输入的文字信息进行提交,假设确认按钮位于页面最下方,那么打开软键盘后,确认按钮将会被遮挡住,相应地,可将确认按钮确定为目标元素。
通过上述处理,可实现对于候选元素的有效筛选,从而避免对于一些对后续处理没有帮助的DOM元素的位置进行调整,进而降低了时间成本及减少了资源消耗等。
进一步地,对于确定出的目标元素,可将其从原始展示位置迁移到软键盘未遮挡住的页面区域中进行展示。
优选地,可获取软键盘打开后页面的视口高度,作为参考高度,并可根据参考高度确定出软键盘对应的矩形区域的上边缘位置,作为目标位置,进一步地,可按照目标元素对应的矩形区域的下边缘位置与目标位置重合的方式,将目标元素从原始展示位置迁移到软键盘未遮挡住的页面区域中进行展示。
软键盘打开之前的视口高度是已知的,软键盘打开之后的视口高度也是已知的,那么可获取两个视口高度的差值,根据所述差值确定出软键盘对应的矩形区域的上边缘位置,并可将其作为目标位置,目标元素也会对应一个矩形区域,可按照该矩形区域的下边缘位置与目标位置重合的方式,将目标元素从原始展示位置迁移到软键盘未遮挡住的页面区域中进行展示。
通过上述处理,可使得目标元素紧贴软键盘上方进行展示,从而呈现出目标元素与软键盘为一个整体的视觉效果,进而优化了页面展示效果,并方便了用户使用等。
优选地,响应于根据监听结果确定软键盘收起,可将目标元素恢复到原始展示位置进行展示。
比如,当用户完成文字信息输入并点击确认按钮进行提交之后,可收起软键盘,相应地,可将目标元素恢复到原始展示位置进行展示,从而使得软键盘收起后页面布局恢复原样,进而进一步提升了页面展示效果等。
优选地,响应于确定监听到的视口高度与页面内容高度一致,可确定软键盘收起。即可通过将监听到的视口高度与页面内容高度进行比较,高效准确地确定出软键盘的收起时机。
另外,优选地,在监听页面的视口高度变化时,可利用移动终端中的视觉视口接口(VisualViewport api)监听页面的视口高度变化。
即可借助于移动终端的已有接口来实现页面视口高度的实时监听,从而降低了实现成本,并提升了监听效果等。
通常来说,VisualViewport api仅在采用IOS操作系统、且IOS大于或等于13的版本中支持,因此优选地,本公开所述方法可适用于采用IOS操作系统、且IOS版本大于或等于13的移动终端中。
结合上述介绍,图2为本公开所述页面元素展示方法第二实施例的流程图。如图2所示,包括以下具体实现方式。
在步骤201中,监听页面的视口高度变化,所述页面为移动终端的屏幕上所展示的页面。
图3为本公开所述未打开软键盘之前的页面示意图。如图3所示,此时的视口高度与页面内容高度一致。
在步骤202中,若确定监听到的视口高度与页面内容高度不一致,则确定软键盘打开。
一旦确定监听到的视口高度与页面内容高度不一致,则可确定软键盘打开,进而可按照后续方式进行处理。
在步骤203中,将位于软键盘遮挡住的页面区域中的DOM元素作为候选元素,从候选元素中选出与软键盘对应的用户操作相关的DOM元素,作为目标元素,所述用户操作为触发软键盘打开、需要使用软键盘进行文字信息输入的操作。
其中,所述目标元素包括:用于指示对输入的文字信息进行提交的确认按钮。
如图3所示,软键盘被打开之前,“新增店铺”按钮(即确认按钮)位于页面最下方,页面上方展示有输入框,用户点击输入框之后,软键盘打开,即软键盘弹出,按照传统处理方式,“新增店铺”按钮会被软键盘遮挡住,而按照本公开所述处理方式,可将“新增店铺”按钮确定为目标元素。
在步骤204中,获取软键盘打开后页面的视口高度,作为参考高度,根据参考高度确定出软键盘对应的矩形区域的上边缘位置,作为目标位置,按照目标元素对应的矩形区域的下边缘位置与目标位置重合的方式,将目标元素从原始展示位置迁移到软键盘未遮挡住的页面区域中进行展示。
图4为本公开所述打开软键盘之后的目标元素展示位置示意图。如图4所示,从视觉效果上来说,“新增店铺”按钮将被软键盘顶起,紧贴软键盘进行展示。
在步骤205中,若确定监听到的视口高度与页面内容高度一致,则确定软键盘收起。
比如,用户利用软键盘在输入框中完成文字信息输入之后,可通过点击页面中的预定位置收起软键盘,所述预定位置通常包括除输入框、软键盘、“新增店铺”按钮、浏览器头部以及手机(假设移动终端为手机)头部之外的位置。
相应地,一旦软键盘收起,则会使得监听到的视口高度与页面内容高度一致。
在步骤206中,将目标元素恢复到原始展示位置进行展示。
即可将“新增店铺”按钮恢复到图3所示的原始展示位置进行展示。
需要说明的是,对于前述的各方法实施例,为了简单描述,将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本公开并不受所描述的动作顺序的限制,因为依据本公开,某些步骤可以采用其它顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定是本公开所必须的。另外,某个实施例中没有详述的部分,可以参见其它实施例中的相关说明。
以上是关于方法实施例的介绍,以下通过装置实施例,对本公开所述方案进行进一步说明。
图5为本公开所述页面元素展示装置实施例500的组成结构示意图。如图5所示,包括:监听模块501、确定模块502以及迁移模块503。
监听模块501,用于监听页面的视口高度变化,所述页面为移动终端的屏幕上所展示的页面。
确定模块502,用于响应于根据监听结果确定软键盘打开,将位于软键盘遮挡住的页面区域中的DOM元素作为候选元素,并从候选元素中确定出需要进行位置迁移的DOM元素,作为目标元素。
迁移模块503,用于将目标元素从原始展示位置迁移到软键盘未遮挡住的页面区域中进行展示。
采用上述装置实施例所述方案,在通过监听页面的视口高度变化确定出软键盘打开之后,可将软键盘遮挡住的页面区域中的目标元素迁移到软键盘未遮挡住的页面区域中进行展示,从而使得用户无需执行收起软键盘操作,即可直接对目标元素进行操作,进而降低了实现复杂度,并降低了时间成本及提升了处理效率等。
监听模块501可实时监听页面的视口高度变化,并可根据监听结果确定软键盘是否打开。优选地,监听模块501响应于确定监听到的视口高度与页面内容高度不一致,可确定软键盘打开。
正常情况下,视口高度与页面内容高度是一致的,而软键盘的打开会导致视口高度与页面内容高度不一致,那么相应地,一旦确定视口高度与页面内容高度不一致,则可确定软键盘打开。
在确定软键盘打开之后,确定模块502可将位于软键盘遮挡住的页面区域中的DOM元素作为候选元素,并可从候选元素中确定出需要进行位置迁移的DOM元素,作为目标元素。
优选地,确定模块502可从候选元素中选出与软键盘对应的用户操作相关的DOM元素,作为目标元素,所述用户操作为触发软键盘打开、需要使用软键盘进行文字信息输入的操作。另外,优选地,所述目标元素可包括:用于指示对输入的文字信息进行提交的确认按钮。
进一步地,对于确定出的目标元素,迁移模块503可将其从原始展示位置迁移到软键盘未遮挡住的页面区域中进行展示。
优选地,迁移模块503可获取软键盘打开后页面的视口高度,作为参考高度,并可根据参考高度确定出软键盘对应的矩形区域的上边缘位置,作为目标位置,进一步地,可按照目标元素对应的矩形区域的下边缘位置与目标位置重合的方式,将目标元素从原始展示位置迁移到软键盘未遮挡住的页面区域中进行展示。
软键盘打开之前的视口高度是已知的,软键盘打开之后的视口高度也是已知的,那么可获取两个视口高度的差值,根据所述差值确定出软键盘对应的矩形区域的上边缘位置,并可将其作为目标位置,目标元素也会对应一个矩形区域,可按照该矩形区域的下边缘位置与目标位置重合的方式,将目标元素从原始展示位置迁移到软键盘未遮挡住的页面区域中进行展示。
优选地,迁移模块503响应于根据监听结果确定软键盘收起,可将目标元素恢复到原始展示位置进行展示。
优选地,迁移模块503响应于确定监听到的视口高度与页面内容高度一致,可确定软键盘收起。
另外,优选地,监听模块501在监听页面的视口高度变化时,可利用移动终端中的VisualViewport api监听页面的视口高度变化。
图5所示装置实施例的具体工作流程可参照前述方法实施例中的相关说明,不再赘述。
总之,采用本公开所述方案,可节省用户的时间成本及提升处理效率,并可提升页面展示效果等。
本公开所述方案可应用于人工智能领域,特别涉及网页开发以及数据处理等领域。人工智能是研究使计算机来模拟人的某些思维过程和智能行为(如学习、推理、思考、规划等)的学科,既有硬件层面的技术也有软件层面的技术,人工智能硬件技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理等技术,人工智能软件技术主要包括计算机视觉技术、语音识别技术、自然语言处理技术以及机器学习/深度学习、大数据处理技术、知识图谱技术等几大方向。
另外,本公开所述实施例中的页面及文字信息等并不是针对某一特定用户的,并不能反映出某一特定用户的个人信息。本公开的技术方案中,所涉及的用户个人信息的收集、存储、使用、加工、传输、提供和公开等处理,均符合相关法律法规的规定,且不违背公序良俗。
根据本公开的实施例,本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。
图6示出了可以用来实施本公开的实施例的电子设备600的示意性框图。电子设备旨在表示各种形式的数字计算机,诸如,膝上型计算机、台式计算机、工作台、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置,诸如,个人数字助理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例,并且不意在限制本文中描述的和/或者要求的本公开的实现。
如图6所示,设备600包括计算单元601,其可以根据存储在只读存储器(ROM)602中的计算机程序或者从存储单元608加载到随机访问存储器(RAM)603中的计算机程序,来执行各种适当的动作和处理。在RAM 603中,还可存储设备600操作所需的各种程序和数据。计算单元601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。
设备600中的多个部件连接至I/O接口605,包括:输入单元606,例如键盘、鼠标等;输出单元607,例如各种类型的显示器、扬声器等;存储单元608,例如磁盘、光盘等;以及通信单元609,例如网卡、调制解调器、无线通信收发机等。通信单元609允许设备600通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。
计算单元601可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元601的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元601执行上文所描述的各个方法和处理,例如本公开所述的方法。例如,在一些实施例中,本公开所述的方法可被实现为计算机软件程序,其被有形地包含于机器可读介质,例如存储单元608。在一些实施例中,计算机程序的部分或者全部可以经由ROM 602和/或通信单元609而被载入和/或安装到设备600上。当计算机程序加载到RAM 603并由计算单元601执行时,可以执行本公开所述的方法的一个或多个步骤。备选地,在其他实施例中,计算单元601可以通过其他任何适当的方式(例如,借助于固件)而被配置为执行本公开所述的方法。
本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、复杂可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括:实施在一个或者多个计算机程序中,该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释,该可编程处理器可以是专用或者通用可编程处理器,可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令,并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。
用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器,使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行,作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。
在本公开的上下文中,机器可读介质可以是有形的介质,其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备,或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
为了提供与用户的交互,可以在计算机上实施此处描述的系统和技术,该计算机具有:用于向用户显示信息的显示装置(例如,CRT(阴极射线管)或者LCD(液晶显示器)监视器);以及键盘和指向装置(例如,鼠标或者轨迹球),用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互;例如,提供给用户的反馈可以是任何形式的传感反馈(例如,视觉反馈、听觉反馈、或者触觉反馈);并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如,作为数据服务器)、或者包括中间件部件的计算系统(例如,应用服务器)、或者包括前端部件的计算系统(例如,具有图形用户界面或者网络浏览器的用户计算机,用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如,通信网络)来将系统的部件相互连接。通信网络的示例包括:局域网(LAN)、广域网(WAN)和互联网。
计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器,也可以为分布式系统的服务器,或者是结合了区块链的服务器。
应该理解,可以使用上面所示的各种形式的流程,重新排序、增加或删除步骤。例如,本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行,只要能够实现本公开公开的技术方案所期望的结果,本文在此不进行限制。
上述具体实施方式,并不构成对本公开保护范围的限制。本领域技术人员应该明白的是,根据设计要求和其他因素,可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等,均应包含在本公开保护范围之内。
Claims (17)
1.一种页面元素展示方法,包括:
监听页面的视口高度变化,所述页面为移动终端的屏幕上所展示的页面;
响应于根据监听结果确定软键盘打开,将位于所述软键盘遮挡住的页面区域中的文档对象模型元素作为候选元素,从所述候选元素中确定出需要进行位置迁移的文档对象模型元素,作为目标元素;
将所述目标元素从原始展示位置迁移到所述软键盘未遮挡住的页面区域中进行展示。
2.根据权利要求1所述的方法,其中,
所述从所述候选元素中确定出需要进行位置迁移的文档对象模型元素,作为目标元素包括:
从所述候选元素中选出与所述软键盘对应的用户操作相关的文档对象模型元素,作为所述目标元素,所述用户操作为触发所述软键盘打开、需要使用所述软键盘进行文字信息输入的操作。
3.根据权利要求2所述的方法,其中,
所述目标元素包括:用于指示对输入的文字信息进行提交的确认按钮。
4.根据权利要求1所述的方法,其中,
所述将所述目标元素从原始展示位置迁移到所述软键盘未遮挡住的页面区域中进行展示包括:
获取所述软键盘打开后页面的视口高度,作为参考高度;
根据所述参考高度确定出所述软键盘对应的矩形区域的上边缘位置,作为目标位置;
按照所述目标元素对应的矩形区域的下边缘位置与所述目标位置重合的方式,将所述目标元素从所述原始展示位置迁移到所述软键盘未遮挡住的页面区域中进行展示。
5.根据权利要求1~4中任一项所述的方法,还包括:
响应于根据监听结果确定所述软键盘收起,将所述目标元素恢复到所述原始展示位置进行展示。
6.根据权利要求5所述的方法,其中,
所述根据监听结果确定软键盘打开包括:响应于确定监听到的视口高度与页面内容高度不一致,确定所述软键盘打开;
所述根据监听结果确定所述软键盘收起包括:响应于确定监听到的视口高度与所述页面内容高度一致,确定所述软键盘收起。
7.根据权利要求1~4中任一项所述的方法,其中,
所述监听页面的视口高度变化包括:利用所述移动终端中的视觉视口接口监听页面的视口高度变化。
8.一种页面元素展示装置,包括:监听模块、确定模块以及迁移模块;
所述监听模块,用于监听页面的视口高度变化,所述页面为移动终端的屏幕上所展示的页面;
所述确定模块,用于响应于根据监听结果确定软键盘打开,将位于所述软键盘遮挡住的页面区域中的文档对象模型元素作为候选元素,从所述候选元素中确定出需要进行位置迁移的文档对象模型元素,作为目标元素;
所述迁移模块,用于将所述目标元素从原始展示位置迁移到所述软键盘未遮挡住的页面区域中进行展示。
9.根据权利要求8所述的装置,其中,
所述确定模块从所述候选元素中选出与所述软键盘对应的用户操作相关的文档对象模型元素,作为所述目标元素,所述用户操作为触发所述软键盘打开、需要使用所述软键盘进行文字信息输入的操作。
10.根据权利要求9所述的装置,其中,
所述目标元素包括:用于指示对输入的文字信息进行提交的确认按钮。
11.根据权利要求8所述的装置,其中,
所述迁移模块获取所述软键盘打开后页面的视口高度,作为参考高度,根据所述参考高度确定出所述软键盘对应的矩形区域的上边缘位置,作为目标位置,按照所述目标元素对应的矩形区域的下边缘位置与所述目标位置重合的方式,将所述目标元素从所述原始展示位置迁移到所述软键盘未遮挡住的页面区域中进行展示。
12.根据权利要求8~11中任一项所述的装置,其中,
所述迁移模块进一步用于,响应于根据监听结果确定所述软键盘收起,将所述目标元素恢复到所述原始展示位置进行展示。
13.根据权利要求12所述的装置,其中,
所述确定模块响应于确定监听到的视口高度与页面内容高度不一致,确定所述软键盘打开;
所述迁移模块响应于确定监听到的视口高度与所述页面内容高度一致,确定所述软键盘收起。
14.根据权利要求8~11中任一项所述的装置,其中,
所述监听模块利用所述移动终端中的视觉视口接口监听页面的视口高度变化。
15.一种电子设备,包括:
至少一个处理器;以及
与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行权利要求1-7中任一项所述的方法。
16.一种存储有计算机指令的非瞬时计算机可读存储介质,其中,所述计算机指令用于使计算机执行权利要求1-7中任一项所述的方法。
17.一种计算机程序产品,包括计算机程序/指令,所述计算机程序/指令被处理器执行时实现权利要求1-7中任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311402230.6A CN118092776A (zh) | 2023-10-26 | 2023-10-26 | 页面元素展示方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311402230.6A CN118092776A (zh) | 2023-10-26 | 2023-10-26 | 页面元素展示方法、装置、电子设备及存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN118092776A true CN118092776A (zh) | 2024-05-28 |
Family
ID=91157010
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202311402230.6A Pending CN118092776A (zh) | 2023-10-26 | 2023-10-26 | 页面元素展示方法、装置、电子设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN118092776A (zh) |
-
2023
- 2023-10-26 CN CN202311402230.6A patent/CN118092776A/zh active Pending
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN113342345A (zh) | 深度学习框架的算子融合方法、装置 | |
CN114187459A (zh) | 目标检测模型的训练方法、装置、电子设备以及存储介质 | |
CN113127365A (zh) | 确定网页质量的方法、装置、电子设备和计算机可读存储介质 | |
CN114428902B (zh) | 信息搜索方法、装置、电子设备及存储介质 | |
CN113392346A (zh) | 资源文件的路径处理方法、装置、电子设备及存储介质 | |
CN112835579A (zh) | 确定界面代码的方法、装置、电子设备和存储介质 | |
CN113885960B (zh) | 小程序页面的处理方法、装置、电子设备和存储介质 | |
CN114861059A (zh) | 资源推荐方法、装置、电子设备及存储介质 | |
CN113204614B (zh) | 模型训练方法、优化训练数据集的方法及其装置 | |
CN114417780A (zh) | 状态同步方法、装置、电子设备及存储介质 | |
CN117573507A (zh) | 测试用例生成方法、装置、电子设备及存储介质 | |
CN115454261A (zh) | 输入法候选词生成方法、装置、电子设备及可读存储介质 | |
CN118092776A (zh) | 页面元素展示方法、装置、电子设备及存储介质 | |
CN114816184A (zh) | 一种操作控件的展示方法、装置、设备及存储介质 | |
CN113239296B (zh) | 小程序的展示方法、装置、设备和介质 | |
CN113434378B (zh) | 网页稳定性的检测方法、装置、电子设备及可读存储介质 | |
CN116127948B (zh) | 待标注文本数据的推荐方法、装置及电子设备 | |
US20240013364A1 (en) | Image-based vehicle damage assessment method, apparatus and storage medium | |
US20230004774A1 (en) | Method and apparatus for generating node representation, electronic device and readable storage medium | |
CN116501284A (zh) | 语音控制方法、装置、设备、存储介质和程序产品 | |
CN115761430A (zh) | 目标检测方法、模型训练方法、装置、介质和电子设备 | |
CN114329205A (zh) | 用于推送信息的方法和装置 | |
CN116340689A (zh) | 网站站点的处理方法和装置 | |
CN117742711A (zh) | 面向低代码的页面渲染方法、装置、电子设备和存储介质 | |
CN116932033A (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 |