本發(fā)明涉及移動通信技術(shù)領(lǐng)域，尤其涉及一種瀏覽器中輸入框的定位方法、裝置及移動設(shè)備。

背景技術(shù)：

近年來，隨著移動通信技術(shù)的迅速發(fā)展，各種手持終端設(shè)備，如手機(jī)、個人數(shù)字助理(PDA)已成為人們生活必不可少的電子設(shè)備。在使用手持終端設(shè)備中的瀏覽器瀏覽網(wǎng)頁時，一些列表的頁面底部都會有用戶輸入評論內(nèi)容的浮動輸入框。當(dāng)用戶點擊網(wǎng)頁中的某一輸入框時，瀏覽器通常會在手持終端設(shè)備屏幕的底端彈出輸入法界面，供用戶輸入滿足輸入框要求的信息。

在正常情況下，用戶點擊評論框，輸入法界面會彈出，此時評論框應(yīng)該浮在輸入法界面上方。但是，由于iOS系統(tǒng)本身的問題，導(dǎo)致點擊輸入框時，輸入框竟然脫離了輸入法界面一段距離，如圖1所示，對于用戶來說體驗是非常不好。此外，當(dāng)切換為第三方輸入法時，由于輸入法界面位置的不確定性，導(dǎo)致輸入法界面會覆蓋輸入框，用戶無法查看輸入框中輸入的信息。

因此，需要重新提供一種針對輸入框的定位方法，使得輸入法界面彈出時，輸入框能夠根據(jù)輸入法界面的位置進(jìn)行適應(yīng)性的調(diào)整。

技術(shù)實現(xiàn)要素：

本發(fā)明實施例提供一種瀏覽器中輸入框的定位方法、裝置及移動設(shè)備，用以解決現(xiàn)有技術(shù)的瀏覽器中輸入框易被輸入法界面覆蓋的問題。

依據(jù)本發(fā)明的一個方面，提供一種瀏覽器中輸入框的定位方法，包括：

當(dāng)檢測到輸入法界面彈出后，獲取瀏覽頁面向上滾動距離；

將所述瀏覽頁面的定位屬性調(diào)整為浮動定位，同時將所述浮動定位的頂部值調(diào)整為所述瀏覽頁面向上滾動距離；

根據(jù)調(diào)整的浮動定位加載所述瀏覽頁面；

所述輸入框通過浮動定位固定于所述瀏覽頁面底部。

進(jìn)一步地，所述方法還包括：

存儲所述瀏覽頁面向上滾動距離；

當(dāng)檢測到所述輸入法界面收起后，將所述瀏覽頁面調(diào)整為相對定位；

根據(jù)所述相對定位加載瀏覽頁面，并將所述瀏覽頁面向上滾動所述距離；

在滾動后的瀏覽頁面底部固定所述輸入框。

進(jìn)一步地，所述方法還包括：

當(dāng)所述輸入法界面彈出后，若檢測到用戶對頁面進(jìn)行操作，則忽略此次操作。

進(jìn)一步地，所述方法還包括：

當(dāng)所述輸入法界面收起后，若檢測到用戶對頁面進(jìn)行操作時，則執(zhí)行此次操作。

進(jìn)一步地，所述方法還包括，當(dāng)所述若檢測到用戶對頁面進(jìn)行操作后，獲取聚焦標(biāo)識位；當(dāng)所述聚焦標(biāo)識位為真時，則忽略此次操作；否則，執(zhí)行此次操作。

依據(jù)本發(fā)明的又一個方面，提供一種瀏覽器中輸入框的定位裝置，包括：

獲取單元，用于當(dāng)檢測到輸入法界面彈出后，獲取瀏覽頁面向上滾動距離；

調(diào)整單元，用于將所述瀏覽頁面的定位屬性調(diào)整為浮動定位，同時將所述浮動定位的頂部值調(diào)整為所述瀏覽頁面向上滾動距離；

加載單元，用于根據(jù)調(diào)整的浮動定位加載所述瀏覽頁面；

固定單元，用于在所述瀏覽頁面底部固定所述輸入框。

進(jìn)一步地，所述裝置還包括存儲單元，存儲所述瀏覽頁面向上滾動距離；

調(diào)整單元，用于當(dāng)檢測到所述輸入法界面收起后，將所述瀏覽頁面調(diào)整為相對定位；

加載單元，用于根據(jù)所述相對定位加載瀏覽頁面，并將所述瀏覽頁面向上滾動所述距離；

固定單元，還用于在滾動后的瀏覽頁面底部固定所述輸入框。

進(jìn)一步地，所述裝置還包括處理單元，用于當(dāng)所述輸入法界面彈出后，若檢測到用戶對頁面進(jìn)行操作，則忽略此次操作。

進(jìn)一步地，所述處理單元，還用于當(dāng)所述輸入法界面收起后，若檢測到用戶對頁面進(jìn)行操作，則執(zhí)行此次操作。

進(jìn)一步地，所述裝置還包括第二獲取單元，當(dāng)所述若檢測到用戶對頁面進(jìn)行操作后，獲取聚焦標(biāo)識位；所述處理單元，用于當(dāng)所述聚焦標(biāo)識位為真時，則忽略此次操作；否則，執(zhí)行此次操作。

依據(jù)本發(fā)明的一個方面，提供一種上述裝置。

本發(fā)明具有以下有益效果：

本發(fā)明實施例中通過檢測到輸入法界面是否彈出，獲取瀏覽頁面向上滾動距離；根據(jù)該距離調(diào)整輸入框在頁面中的顯示位置。因此，本發(fā)明所提供的輸入框定位方法，無需考慮輸入法界面的位置和大小，只需根據(jù)瀏覽頁面的滾動的距離，即可確定輸入框的位置，確保輸入框與輸入法界面實現(xiàn)銜接，保證整個界面的設(shè)計美感，提高用戶的使用體驗。

上述說明僅是本發(fā)明技術(shù)方案的概述，為了能夠更清楚了解本發(fā)明的技術(shù)手段，而可依照說明書的內(nèi)容予以實施，并且為了讓本發(fā)明的上述和其它目的、特征和優(yōu)點能夠更明顯易懂，以下特舉本發(fā)明的具體實施方式。

附圖說明

為了更清楚地說明本發(fā)明實施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對實施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作一簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的一些實施例，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動性的前提下，還可以根據(jù)這些附圖獲得其他的附圖。

圖1為現(xiàn)有技術(shù)中輸入框與輸入法界面的位置關(guān)系示意圖；

圖2為本發(fā)明實施例中所提供的輸入框的定位方法的流程圖；

圖3為本發(fā)明中輸入框與輸入法界面的位置關(guān)系示意圖；

圖4為本發(fā)明一具體實施例輸入框的定位方法的流程圖；

圖5為本發(fā)明實施例所提供的輸入框定位裝置的結(jié)構(gòu)框圖。

具體實施方式

下面將結(jié)合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實施例僅僅是本發(fā)明一部分實施例，而不是全部的實施例。基于本發(fā)明中的實施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都屬于本發(fā)明保護(hù)的范圍。

本發(fā)明實施例提供一種瀏覽器中輸入框的定位方法，如圖2所示，具體包括如下步驟：

步驟101，當(dāng)檢測到輸入法界面彈出后，獲取瀏覽頁面向上滾動距離；

步驟102，將瀏覽頁面的定位屬性調(diào)整為浮動定位，同時將浮動定位的頂部值調(diào)整為瀏覽頁面向上滾動距離；

步驟103，根據(jù)調(diào)整的浮動定位加載瀏覽頁面；

步驟104，輸入框通過浮動定位固定于瀏覽頁面底部。

本發(fā)明實施例中通過檢測到輸入法界面是否彈出，獲取瀏覽頁面向上滾動距離；根據(jù)該距離調(diào)整輸入框的顯示位置。因此，本發(fā)明所提供的輸入框定位方法，無需考慮輸入法界面的位置和大小，只需根據(jù)瀏覽頁面的滾動的距離，即可確定輸入框的位置，確保輸入框與輸入法界面實現(xiàn)銜接，保證整個界面的美觀，提高用戶的使用體驗。

下面結(jié)合附圖對本發(fā)明的具體實施過程進(jìn)行詳細(xì)介紹。

步驟101，當(dāng)檢測到輸入法界面彈出后，獲取瀏覽頁面向上滾動距離。

在該步驟中，頁面底部的輸入框聚焦后，輸入法界面彈起，頁面會向上滾動一段距離。通過監(jiān)測頁面上移的距離來調(diào)整輸入的位置。在獲取瀏覽頁面向上滾動距離時，通過調(diào)用頁面的CSS(用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言)的scrollTop屬性，來獲取具體的滾動距離，也就是顯示頁面部分相對于整個頁面的頂部的偏移距離。具體地，scrollTop屬性表示的是頁面不可見的部分內(nèi)容的高度。例如外層元素的高度值是200px，內(nèi)層元素的高度值是300px。“內(nèi)層元素中的內(nèi)容”高過了“外層元素”本身。當(dāng)向下拖動滾動條時，有部分內(nèi)容會隱沒在“外層元素的上邊界”之外，100px就是scrollTop獲取的高度值。

步驟102，將瀏覽頁面的定位屬性調(diào)整為浮動定位，同時將浮動定位的頂部值調(diào)整為瀏覽頁面向上滾動距離。

在該步驟中，瀏覽頁面的定位屬性默認(rèn)情況下為CSS的相對定位即position:relative，便于排版布局。而在輸入法界面彈起后，將瀏覽頁面通常通過CSS中position：fixed屬性來定位頁面。Fixed為元素的浮動定位屬性。fixed屬性包括"left"、"top"、"right"、"bottom"四個屬性參數(shù)。在輸入法界面彈起后，為了保證輸入框繼續(xù)位于顯示的頁面底部，頁面需要向上偏移scrollTop的高度。

步驟103，根據(jù)調(diào)整的浮動定位加載瀏覽頁面。

在該步驟中，通過將scrollTop的高度賦值給top屬性，其他屬性的值保持默認(rèn)值，根據(jù)調(diào)整后浮動定位的各個屬性的值加載該瀏覽頁面。

步驟104，輸入框通過浮動定位固定于瀏覽頁面底部。

在該步驟中，當(dāng)頁面調(diào)整完成后，由于輸入框定位通過采用浮動定位屬性，因此當(dāng)頁面向上滾動后，輸入框?qū)⑤斎肟蚶^續(xù)定位至頁面的底部，使得輸入框與輸入法界面實現(xiàn)銜接，保證整個輸入界面的設(shè)計美感。

在獲取瀏覽頁面向上滾動距離后，將該距離值進(jìn)行存儲，用于后續(xù)輸入法界面收起時，整個瀏覽界面的調(diào)整。將瀏覽頁面的fixed調(diào)整為relative相對定位的為默認(rèn)值；根據(jù)默認(rèn)的相對定位加載瀏覽頁面。由于頁面顯示時，通常默認(rèn)從頁面的頂部開始顯示。為了保證輸入法界面收起后，保證頁面位置與用戶輸入前一致，因此當(dāng)檢測到輸入法界面收起后，根據(jù)存儲的向上距離值將瀏覽頁面向上滾動相應(yīng)距離，將頁面調(diào)整至整個瀏覽器窗口大小。接著，在瀏覽頁面的底部浮動固定輸入框，具體如圖3所示。

進(jìn)一步地，目前瀏覽頁面中通常通過上拉的動作實現(xiàn)更多功能的加載。然而，當(dāng)輸入框聚焦時，可能誤操作導(dǎo)致觸發(fā)加載操作。為了避免上述誤操作，給用戶帶來的不好體驗，本發(fā)明實施例中設(shè)置聚焦標(biāo)志位來標(biāo)識當(dāng)前輸入框是否聚焦。根據(jù)聚焦的情況，來判斷是否執(zhí)行用戶觸發(fā)的操作。具體地，當(dāng)所述輸入法界面彈出后，將聚焦標(biāo)志位置為true；在用戶對頁面進(jìn)行操作時，若聚焦標(biāo)志位為true，則忽略此次操作。當(dāng)輸入法界面收起后，將聚焦標(biāo)志位置為false；用戶對頁面進(jìn)行操作時，若聚焦標(biāo)志位為false，則執(zhí)行操作對應(yīng)的邏輯處理。

如圖4所示，提供了一種瀏覽器中輸入框的定位方法的具體實施過程，具體包括如下步驟：

步驟201，注冊頁面原本的scroll滾動事件。即通過上拉操作，觸發(fā)頁面的一些邏輯處理，例如向上拉頁面后，則加載更多的評論內(nèi)容等。

步驟202，檢測輸入法界面是否彈起：若彈起，則執(zhí)行步驟203；否則，執(zhí)行步驟208；

步驟203，當(dāng)檢測到輸入法界面彈起后，獲取當(dāng)前頁面的scrollTop高度、存儲該值，并將聚焦標(biāo)識位isFocus＝true；輸入框獲得焦點，用戶可以在輸入框中進(jìn)行輸入。

步驟204，對當(dāng)前瀏覽頁面進(jìn)行css設(shè)置(position:fixed，top:scrollTop,width:100％)，根據(jù)設(shè)置后的fixed屬性加載輸入框。

步驟205，檢測當(dāng)前瀏覽頁面是否有Scroll事件：若有，則判斷聚焦標(biāo)識位是否為true：若為true，則忽略此次操作。通過判斷聚焦標(biāo)識位，可以在Scroll時，避免影響頁面原有的加載邏輯。

步驟206，檢測輸入法界面是否收起：若收起，執(zhí)行步驟207，否則執(zhí)行步驟205。

步驟207，對當(dāng)前瀏覽頁面進(jìn)行css設(shè)置(position:relative,top:auto；isFocus＝false)。接著調(diào)用window.scrollTo()函數(shù)將當(dāng)前頁面滾動向上滾動scrollTop的距離，保證頁面位置與用戶輸入前一致。

步驟208；檢測當(dāng)前瀏覽頁面是否有Scroll事件：當(dāng)有時，判斷聚焦標(biāo)識位是否為false，若為false，則執(zhí)行此次操作，加載相應(yīng)的邏輯。

本發(fā)明實施例還提供了一種瀏覽器中輸入框的定位裝置，如圖5所示，具體包括：

獲取單元，用于當(dāng)檢測到輸入法界面彈出后，獲取瀏覽頁面向上滾動距離；

調(diào)整單元，用于將瀏覽頁面的定位屬性調(diào)整為浮動定位，同時將浮動定位的頂部值調(diào)整為瀏覽頁面向上滾動距離；

加載單元，用于根據(jù)調(diào)整的浮動定位加載瀏覽頁面；

固定單元，用于在瀏覽頁面底部固定輸入框。

進(jìn)一步地，裝置還包括存儲單元，存儲瀏覽頁面向上滾動距離；

調(diào)整單元，用于當(dāng)檢測到輸入法界面收起后，將瀏覽頁面調(diào)整為相對定位；

加載單元，用于根據(jù)相對定位加載瀏覽頁面，并將瀏覽頁面向上滾動距離；

固定單元，還用于在滾動后的瀏覽頁面底部固定輸入框。

進(jìn)一步地，裝置還包括處理單元，用于當(dāng)輸入法界面彈出后，若檢測到用戶對頁面進(jìn)行操作，則忽略此次操作。

進(jìn)一步地，處理單元，還用于當(dāng)輸入法界面收起后，若檢測到用戶對頁面進(jìn)行操作，則執(zhí)行此次操作。

進(jìn)一步地，裝置還包括第二獲取單元，當(dāng)若檢測到用戶對頁面進(jìn)行操作后，獲取聚焦標(biāo)識位；處理單元，用于當(dāng)聚焦標(biāo)識位為真時，則忽略此次操作；否則，執(zhí)行此次操作。

本發(fā)明實施例還提供一種移動設(shè)備，包括上述的瀏覽器中輸入框的定位裝置。

綜上所述，本發(fā)明實施例所提供的檢測到輸入法界面是否彈出，計算此時頁面的scrollTop高度，設(shè)置輸入框的position:fixed且做一個高度為scrollTop的scroll滾動，使得輸入框恰好位于輸入法界面的上方。因此，本發(fā)明所提供的輸入框定位方法，無需考慮輸入法界面的位置和大小，只需根據(jù)瀏覽頁面的滾動的距離，即可確定輸入框的位置，確保輸入框與輸入法界面實現(xiàn)銜接，保證整個界面的美觀，提高用戶的使用體驗。

本領(lǐng)域普通技術(shù)人員可以理解實現(xiàn)上述實施例方法中的全部或部分流程，是可以通過計算機(jī)程序來指令相關(guān)的硬件來完成，程序可存儲于計算機(jī)可讀取存儲介質(zhì)中，該程序在執(zhí)行時，可包括如上述各方法的實施例的流程。

雖然通過實施例描述了本申請，本領(lǐng)域的技術(shù)人員知道，本申請有許多變形和變化而不脫離本發(fā)明的精神和范圍。這樣，倘若本發(fā)明的這些修改和變型屬于本發(fā)明權(quán)利要求及其等同技術(shù)的范圍之內(nèi)，則本發(fā)明也意圖包含這些改動和變型在內(nèi)。