CN106201185B - 一种浏览器中输入框的定位方法、装置及移动设备 - Google Patents

Abstract

本发明公开了一种浏览器中输入框的定位方法及装置。其中，该方法包括：当检测到输入法界面弹出后，获取浏览页面向上滚动距离；将浏览页面的定位属性调整为浮动定位，同时将浮动定位的顶部值调整为浏览页面向上滚动距离；根据调整的浮动定位加载浏览页面；输入框通过浮动定位固定于浏览页面底部。本发明无需考虑输入法界面的位置和大小，只需根据浏览页面的滚动的距离，即可确定输入框的位置，确保输入框与输入法界面实现衔接，保证整个界面的设计美感，提高用户的使用体验。

Description

一种浏览器中输入框的定位方法、装置及移动设备

技术领域

本发明涉及移动通信技术领域，尤其涉及一种浏览器中输入框的定位方法、装置及移动设备。

背景技术

近年来，随着移动通信技术的迅速发展，各种手持终端设备，如手机、个人数字助理(PDA)已成为人们生活必不可少的电子设备。在使用手持终端设备中的浏览器浏览网页时，一些列表的页面底部都会有用户输入评论内容的浮动输入框。当用户点击网页中的某一输入框时，浏览器通常会在手持终端设备屏幕的底端弹出输入法界面，供用户输入满足输入框要求的信息。

在正常情况下，用户点击评论框，输入法界面会弹出，此时评论框应该浮在输入法界面上方。但是，由于iOS系统本身的问题，导致点击输入框时，输入框竟然脱离了输入法界面一段距离，如图1所示，对于用户来说体验是非常不好。此外，当切换为第三方输入法时，由于输入法界面位置的不确定性，导致输入法界面会覆盖输入框，用户无法查看输入框中输入的信息。

因此，需要重新提供一种针对输入框的定位方法，使得输入法界面弹出时，输入框能够根据输入法界面的位置进行适应性的调整。

发明内容

本发明实施例提供一种浏览器中输入框的定位方法、装置及移动设备，用以解决现有技术的浏览器中输入框易被输入法界面覆盖的问题。

依据本发明的一个方面，提供一种浏览器中输入框的定位方法，包括：

当检测到输入法界面弹出后，获取浏览页面向上滚动距离；

将所述浏览页面的定位属性调整为浮动定位，同时将所述浮动定位的顶部值调整为所述浏览页面向上滚动距离；

根据调整的浮动定位加载所述浏览页面；

所述输入框通过浮动定位固定于所述浏览页面底部。

进一步地，所述方法还包括：

存储所述浏览页面向上滚动距离；

当检测到所述输入法界面收起后，将所述浏览页面调整为相对定位；

根据所述相对定位加载浏览页面，并将所述浏览页面向上滚动所述距离；

在滚动后的浏览页面底部固定所述输入框。

进一步地，所述方法还包括：

当所述输入法界面弹出后，若检测到用户对页面进行操作，则忽略此次操作。

进一步地，所述方法还包括：

当所述输入法界面收起后，若检测到用户对页面进行操作时，则执行此次操作。

进一步地，所述方法还包括，当所述若检测到用户对页面进行操作后，获取聚焦标识位；当所述聚焦标识位为真时，则忽略此次操作；否则，执行此次操作。

依据本发明的又一个方面，提供一种浏览器中输入框的定位装置，包括：

获取单元，用于当检测到输入法界面弹出后，获取浏览页面向上滚动距离；

调整单元，用于将所述浏览页面的定位属性调整为浮动定位，同时将所述浮动定位的顶部值调整为所述浏览页面向上滚动距离；

加载单元，用于根据调整的浮动定位加载所述浏览页面；

固定单元，用于在所述浏览页面底部固定所述输入框。

进一步地，所述装置还包括存储单元，存储所述浏览页面向上滚动距离；

调整单元，用于当检测到所述输入法界面收起后，将所述浏览页面调整为相对定位；

加载单元，用于根据所述相对定位加载浏览页面，并将所述浏览页面向上滚动所述距离；

固定单元，还用于在滚动后的浏览页面底部固定所述输入框。

进一步地，所述装置还包括处理单元，用于当所述输入法界面弹出后，若检测到用户对页面进行操作，则忽略此次操作。

进一步地，所述处理单元，还用于当所述输入法界面收起后，若检测到用户对页面进行操作，则执行此次操作。

进一步地，所述装置还包括第二获取单元，当所述若检测到用户对页面进行操作后，获取聚焦标识位；所述处理单元，用于当所述聚焦标识位为真时，则忽略此次操作；否则，执行此次操作。

依据本发明的一个方面，提供一种上述装置。

本发明具有以下有益效果：

本发明实施例中通过检测到输入法界面是否弹出，获取浏览页面向上滚动距离；根据该距离调整输入框在页面中的显示位置。因此，本发明所提供的输入框定位方法，无需考虑输入法界面的位置和大小，只需根据浏览页面的滚动的距离，即可确定输入框的位置，确保输入框与输入法界面实现衔接，保证整个界面的设计美感，提高用户的使用体验。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为现有技术中输入框与输入法界面的位置关系示意图；

图2为本发明实施例中所提供的输入框的定位方法的流程图；

图3为本发明中输入框与输入法界面的位置关系示意图；

图4为本发明一具体实施例输入框的定位方法的流程图；

图5为本发明实施例所提供的输入框定位装置的结构框图。

具体实施方式

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

本发明实施例提供一种浏览器中输入框的定位方法，如图2所示，具体包括如下步骤：

步骤101，当检测到输入法界面弹出后，获取浏览页面向上滚动距离；

步骤102，将浏览页面的定位属性调整为浮动定位，同时将浮动定位的顶部值调整为浏览页面向上滚动距离；

步骤103，根据调整的浮动定位加载浏览页面；

步骤104，输入框通过浮动定位固定于浏览页面底部。

本发明实施例中通过检测到输入法界面是否弹出，获取浏览页面向上滚动距离；根据该距离调整输入框的显示位置。因此，本发明所提供的输入框定位方法，无需考虑输入法界面的位置和大小，只需根据浏览页面的滚动的距离，即可确定输入框的位置，确保输入框与输入法界面实现衔接，保证整个界面的美观，提高用户的使用体验。

下面结合附图对本发明的具体实施过程进行详细介绍。

步骤101，当检测到输入法界面弹出后，获取浏览页面向上滚动距离。

在该步骤中，页面底部的输入框聚焦后，输入法界面弹起，页面会向上滚动一段距离。通过监测页面上移的距离来调整输入的位置。在获取浏览页面向上滚动距离时，通过调用页面的CSS(用来表现HTML或XML等文件样式的计算机语言)的scrollTop属性，来获取具体的滚动距离，也就是显示页面部分相对于整个页面的顶部的偏移距离。具体地，scrollTop属性表示的是页面不可见的部分内容的高度。例如外层元素的高度值是200px，内层元素的高度值是300px。“内层元素中的内容”高过了“外层元素”本身。当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，100px就是scrollTop获取的高度值。

步骤102，将浏览页面的定位属性调整为浮动定位，同时将浮动定位的顶部值调整为浏览页面向上滚动距离。

在该步骤中，浏览页面的定位属性默认情况下为CSS的相对定位即position:relative，便于排版布局。而在输入法界面弹起后，将浏览页面通常通过CSS中position：fixed属性来定位页面。Fixed为元素的浮动定位属性。fixed属性包括"left"、"top"、"right"、"bottom"四个属性参数。在输入法界面弹起后，为了保证输入框继续位于显示的页面底部，页面需要向上偏移scrollTop的高度。

步骤103，根据调整的浮动定位加载浏览页面。

在该步骤中，通过将scrollTop的高度赋值给top属性，其他属性的值保持默认值，根据调整后浮动定位的各个属性的值加载该浏览页面。

步骤104，输入框通过浮动定位固定于浏览页面底部。

在该步骤中，当页面调整完成后，由于输入框定位通过采用浮动定位属性，因此当页面向上滚动后，输入框将输入框继续定位至页面的底部，使得输入框与输入法界面实现衔接，保证整个输入界面的设计美感。

在获取浏览页面向上滚动距离后，将该距离值进行存储，用于后续输入法界面收起时，整个浏览界面的调整。将浏览页面的fixed调整为relative相对定位的为默认值；根据默认的相对定位加载浏览页面。由于页面显示时，通常默认从页面的顶部开始显示。为了保证输入法界面收起后，保证页面位置与用户输入前一致，因此当检测到输入法界面收起后，根据存储的向上距离值将浏览页面向上滚动相应距离，将页面调整至整个浏览器窗口大小。接着，在浏览页面的底部浮动固定输入框，具体如图3所示。

进一步地，目前浏览页面中通常通过上拉的动作实现更多功能的加载。然而，当输入框聚焦时，可能误操作导致触发加载操作。为了避免上述误操作，给用户带来的不好体验，本发明实施例中设置聚焦标志位来标识当前输入框是否聚焦。根据聚焦的情况，来判断是否执行用户触发的操作。具体地，当所述输入法界面弹出后，将聚焦标志位置为true；在用户对页面进行操作时，若聚焦标志位为true，则忽略此次操作。当输入法界面收起后，将聚焦标志位置为false；用户对页面进行操作时，若聚焦标志位为false，则执行操作对应的逻辑处理。

如图4所示，提供了一种浏览器中输入框的定位方法的具体实施过程，具体包括如下步骤：

步骤201，注册页面原本的scroll滚动事件。即通过上拉操作，触发页面的一些逻辑处理，例如向上拉页面后，则加载更多的评论内容等。

步骤202，检测输入法界面是否弹起：若弹起，则执行步骤203；否则，执行步骤208；

步骤203，当检测到输入法界面弹起后，获取当前页面的scrollTop高度、存储该值，并将聚焦标识位isFocus＝true；输入框获得焦点，用户可以在输入框中进行输入。

步骤204，对当前浏览页面进行css设置(position:fixed，top:scrollTop,width:100％)，根据设置后的fixed属性加载输入框。

步骤205，检测当前浏览页面是否有Scroll事件：若有，则判断聚焦标识位是否为true：若为true，则忽略此次操作。通过判断聚焦标识位，可以在Scroll时，避免影响页面原有的加载逻辑。

步骤206，检测输入法界面是否收起：若收起，执行步骤207，否则执行步骤205。

步骤207，对当前浏览页面进行css设置(position:relative,top:auto；isFocus＝false)。接着调用window.scrollTo()函数将当前页面滚动向上滚动scrollTop的距离，保证页面位置与用户输入前一致。

步骤208；检测当前浏览页面是否有Scroll事件：当有时，判断聚焦标识位是否为false，若为false，则执行此次操作，加载相应的逻辑。

本发明实施例还提供了一种浏览器中输入框的定位装置，如图5所示，具体包括：

获取单元，用于当检测到输入法界面弹出后，获取浏览页面向上滚动距离；

调整单元，用于将浏览页面的定位属性调整为浮动定位，同时将浮动定位的顶部值调整为浏览页面向上滚动距离；

加载单元，用于根据调整的浮动定位加载浏览页面；

固定单元，用于在浏览页面底部固定输入框。

进一步地，装置还包括存储单元，存储浏览页面向上滚动距离；

调整单元，用于当检测到输入法界面收起后，将浏览页面调整为相对定位；

加载单元，用于根据相对定位加载浏览页面，并将浏览页面向上滚动距离；

固定单元，还用于在滚动后的浏览页面底部固定输入框。

进一步地，装置还包括处理单元，用于当输入法界面弹出后，若检测到用户对页面进行操作，则忽略此次操作。

进一步地，处理单元，还用于当输入法界面收起后，若检测到用户对页面进行操作，则执行此次操作。

进一步地，装置还包括第二获取单元，当若检测到用户对页面进行操作后，获取聚焦标识位；处理单元，用于当聚焦标识位为真时，则忽略此次操作；否则，执行此次操作。

本发明实施例还提供一种移动设备，包括上述的浏览器中输入框的定位装置。

综上所述，本发明实施例所提供的检测到输入法界面是否弹出，计算此时页面的scrollTop高度，设置输入框的position:fixed且做一个高度为scrollTop的scroll滚动，使得输入框恰好位于输入法界面的上方。因此，本发明所提供的输入框定位方法，无需考虑输入法界面的位置和大小，只需根据浏览页面的滚动的距离，即可确定输入框的位置，确保输入框与输入法界面实现衔接，保证整个界面的美观，提高用户的使用体验。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。

虽然通过实施例描述了本申请，本领域的技术人员知道，本申请有许多变形和变化而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (9)

1.一种浏览器中输入框的定位方法，其特征在于，包括：

当检测到输入法界面弹出时，获取浏览页面向上滚动距离；

将所述浏览页面的定位属性调整为浮动定位，同时将所述浮动定位的顶部值调整为所述浏览页面向上滚动距离；

根据调整的浮动定位加载所述浏览页面；

所述输入框通过浮动定位固定于所述浏览页面底部；所述方法还包括：

存储所述浏览页面向上滚动距离；

当检测到所述输入法界面收起后，将所述浏览页面调整为相对定位；

根据所述相对定位加载浏览页面，并将所述浏览页面向上滚动所述距离；

在滚动后的浏览页面底部固定所述输入框。

2.如权利要求1所述的方法，其特征在于，所述方法还包括：

当所述输入法界面弹出后，若检测到用户对页面进行操作，则忽略此次操作。

3.如权利要求1所述的方法，其特征在于，所述方法还包括：

当所述输入法界面收起后，若检测到用户对页面进行操作时，则执行此次操作。

4.如权利要求2或3所述的方法，其特征在于，所述方法还包括，当所述若检测到用户对页面进行操作时，获取聚焦标识位；当所述聚焦标识位为真时，则忽略此次操作；否则，执行此次操作。

5.一种浏览器中输入框的定位装置，其特征在于，包括：

获取单元，用于当检测到输入法界面弹出后，获取浏览页面向上滚动距离；

调整单元，用于将所述浏览页面的定位属性调整为浮动定位，同时将所述浮动定位的顶部值调整为所述浏览页面向上滚动距离；

加载单元，用于根据调整的浮动定位加载所述浏览页面；

固定单元，用于在所述浏览页面底部固定所述输入框；所述装置还包括存储单元，存储所述浏览页面向上滚动距离；

所述调整单元，还用于当检测到所述输入法界面收起后，将所述浏览页面调整为相对定位；

所述加载单元，还用于根据所述相对定位加载浏览页面，并将所述浏览页面向上滚动所述距离；

所述固定单元，还用于在滚动后的浏览页面底部固定所述输入框。

6.如权利要求5所述的装置，其特征在于，所述装置还包括处理单元，用于当所述输入法界面弹出后，若检测到用户对页面进行操作，则忽略此次操作。

7.如权利要求6所述的装置，其特征在于，所述处理单元，还用于当所述输入法界面收起后，若检测到用户对页面进行操作，则执行此次操作。

8.如权利要求6或7所述的装置，其特征在于，还包括第二获取单元，用于当所述若检测到用户对页面进行操作时，获取聚焦标识位；所述处理单元还用于当所述聚焦标识位为真时，则忽略此次操作；否则，执行此次操作。

9.一种移动设备，其特征在于，包括权利要求5～8任一项所述装置。

Images