頁(yè)面頂部輸入框調(diào)整方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及計(jì)算機(jī)技術(shù)，特別涉及一種頁(yè)面頂部輸入框調(diào)整方法及裝置。
【背景技術(shù)】
[0002]隨著移動(dòng)通信電子技術(shù)的發(fā)展，如今以手機(jī)為典型代表的移動(dòng)終端已經(jīng)不單具有遠(yuǎn)程通話的功能，許多個(gè)人電腦上的應(yīng)用程序功能都可以通過(guò)移動(dòng)終端來(lái)實(shí)現(xiàn)，如用戶(hù)可以通過(guò)手機(jī)的瀏覽器瀏覽網(wǎng)頁(yè)內(nèi)容、通過(guò)手機(jī)上播放器播放視頻和音樂(lè)、通過(guò)手機(jī)上的攝像頭進(jìn)彳丁拍照等。
[0003]用戶(hù)通過(guò)移動(dòng)終端的瀏覽器瀏覽網(wǎng)頁(yè)時(shí)，在頁(yè)面的頂部區(qū)域經(jīng)常會(huì)有輸入框，例如搜索輸入框、郵箱輸入框等。當(dāng)用戶(hù)點(diǎn)擊輸入框時(shí)，瀏覽器會(huì)創(chuàng)建一個(gè)輸入框控件覆蓋在頁(yè)面原來(lái)顯示的輸入框位置，而且為了便于用戶(hù)操作，生成的輸入框控件尺寸通常都會(huì)大于頁(yè)面上原有輸入框的尺寸。但是，如果頁(yè)面頂部同時(shí)有fixed元素(fixed元素是指固定屏幕位置的標(biāo)簽，如一些菜單選項(xiàng)、頁(yè)面廣告等)，如圖1所示，由于fixed元素在屏幕上的位置是固定不變的，那么在用戶(hù)點(diǎn)擊輸入框而生成較大尺寸的輸入框控件后，輸入框控件往往會(huì)被fixed元素所覆蓋，從而導(dǎo)致用戶(hù)無(wú)法看到輸入的內(nèi)容，造成輸入時(shí)的不便。

【發(fā)明內(nèi)容】

[0004]本發(fā)明實(shí)施例的目的是提供一種頁(yè)面頂部輸入框調(diào)整方法及裝置，以解決點(diǎn)擊頁(yè)面頂部輸入框而生成的輸入框控件被fixed元素覆蓋的問(wèn)題。
[0005]本發(fā)明實(shí)施例提出一種頁(yè)面頂部輸入框調(diào)整方法，包括:
[0006]根據(jù)瀏覽器排版引擎對(duì)頁(yè)面內(nèi)容的解析，獲取預(yù)設(shè)的用于保存固定屏幕位置的標(biāo)簽參數(shù)的數(shù)組；
[0007]遍歷獲取的所述數(shù)組，判斷是否有固定屏幕位置的標(biāo)簽位于頁(yè)面頂部區(qū)域；
[0008]當(dāng)有固定屏幕位置的標(biāo)簽位于頁(yè)面頂部區(qū)域，則將頁(yè)面頂部區(qū)域的輸入框被點(diǎn)擊后生成的輸入框控件設(shè)置成顯示在所述固定屏幕位置的標(biāo)簽的下方。
[0009]本發(fā)明實(shí)施例還提出一種頁(yè)面頂部輸入框調(diào)整裝置，包括:
[0010]數(shù)組獲取模塊，用于根據(jù)瀏覽器排版引擎對(duì)頁(yè)面內(nèi)容的解析，獲取預(yù)設(shè)的用于保存固定屏幕位置的標(biāo)簽參數(shù)的數(shù)組；
[0011]遍歷模塊，用于遍歷獲取的所述數(shù)組，判斷是否有固定屏幕位置的標(biāo)簽位于頁(yè)面頂部區(qū)域；
[0012]輸入框調(diào)整模塊，用于當(dāng)有固定屏幕位置的標(biāo)簽位于頁(yè)面頂部區(qū)域，則將頁(yè)面頂部區(qū)域的輸入框被點(diǎn)擊后生成的輸入框控件設(shè)置成顯示在所述固定屏幕位置的標(biāo)簽的下方。
[0013]相對(duì)于現(xiàn)有技術(shù)，本發(fā)明的有益效果是:通過(guò)本發(fā)明實(shí)施例的方法及裝置，可以識(shí)別出頁(yè)面頂部區(qū)域是否存在固定屏幕位置的標(biāo)簽，如果存在，則將頁(yè)面頂部的輸入框點(diǎn)擊后生成的輸入框控件移動(dòng)到頂部固定屏幕位置的標(biāo)簽的下方，從而避免輸入框控件被固定屏幕位置的標(biāo)簽覆蓋而無(wú)法看到輸入內(nèi)容的情況發(fā)生，方便了用戶(hù)的輸入操作。
【附圖說(shuō)明】
[0014]圖1為現(xiàn)有的輸入框被固定屏幕位置的標(biāo)簽覆蓋的示意圖；
[0015]圖2為本發(fā)明實(shí)施例的一種頁(yè)面頂部輸入框調(diào)整方法及裝置的應(yīng)用環(huán)境示意圖；
[0016]圖3為本發(fā)明實(shí)施例的一種頁(yè)面頂部輸入框調(diào)整方法的流程圖；
[0017]圖4為本發(fā)明實(shí)施例的一種調(diào)整顯示位置后頁(yè)面上輸入框控件的示意圖；
[0018]圖5為本發(fā)明實(shí)施例的另一種頁(yè)面頂部輸入框調(diào)整方法的流程圖；
[0019]圖6為本發(fā)明實(shí)施例的另一種頁(yè)面頂部輸入框調(diào)整裝置的結(jié)構(gòu)圖。
【具體實(shí)施方式】
[0020]有關(guān)本發(fā)明的前述及其他技術(shù)內(nèi)容、特點(diǎn)及功效，在以下配合參考圖式的較佳實(shí)施例詳細(xì)說(shuō)明中將可清楚的呈現(xiàn)。通過(guò)【具體實(shí)施方式】的說(shuō)明，當(dāng)可對(duì)本發(fā)明為達(dá)成預(yù)定目的所采取的技術(shù)手段及功效得以更加深入且具體的了解，然而所附圖式僅是提供參考與說(shuō)明之用，并非用來(lái)對(duì)本發(fā)明加以限制。
[0021]本發(fā)明實(shí)施例涉及一種頁(yè)面頂部輸入框調(diào)整方法及裝置，其應(yīng)用于移動(dòng)終端，用于識(shí)別頁(yè)面頂部的固定屏幕位置的標(biāo)簽，并將被固定屏幕位置的標(biāo)簽覆蓋的輸入框顯示在可見(jiàn)區(qū)域。請(qǐng)參閱圖2，其為上述的方法及裝置的運(yùn)行環(huán)境示意圖。一種移動(dòng)終端1200，該移動(dòng)終端1200包括有一個(gè)或一個(gè)以上計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)的存儲(chǔ)器120、輸入單元130、顯示單元140、WiFi (wireless fidelity,無(wú)線保真)模塊170、包括有一個(gè)或者一個(gè)以上處理核心的處理器180、以及電源190等部件。本領(lǐng)域技術(shù)人員可以理解，圖2中示出的移動(dòng)終端結(jié)構(gòu)并不構(gòu)成對(duì)終端的限定，可以包括比圖示更多或更少的部件，或者組合某些部件，或者不同的部件布置。其中:
[0022]存儲(chǔ)器120可用于存儲(chǔ)軟件程序以及模塊，處理器180通過(guò)運(yùn)行存儲(chǔ)在存儲(chǔ)器120的軟件程序以及模塊，從而執(zhí)行各種功能應(yīng)用以及數(shù)據(jù)處理。存儲(chǔ)器120可主要包括存儲(chǔ)程序區(qū)和存儲(chǔ)數(shù)據(jù)區(qū)，其中，存儲(chǔ)程序區(qū)可存儲(chǔ)操作系統(tǒng)、至少一個(gè)功能所需的應(yīng)用程序(比如聲音播放功能、圖像播放功能等)等；存儲(chǔ)數(shù)據(jù)區(qū)可存儲(chǔ)根據(jù)移動(dòng)終端1200的使用所創(chuàng)建的數(shù)據(jù)(比如音頻數(shù)據(jù)、電話本等)等。此外，存儲(chǔ)器120可以包括高速隨機(jī)存取存儲(chǔ)器，還可以包括非易失性存儲(chǔ)器，例如至少一個(gè)磁盤(pán)存儲(chǔ)器件、閃存器件、或其他易失性固態(tài)存儲(chǔ)器件。相應(yīng)地，存儲(chǔ)器120還可以包括存儲(chǔ)器控制器，以提供處理器180和輸入單元130對(duì)存儲(chǔ)器120的訪問(wèn)。
[0023]輸入單元130可用于接收輸入的數(shù)字或字符信息，以及產(chǎn)生與用戶(hù)設(shè)置以及功能控制有關(guān)的鍵盤(pán)、鼠標(biāo)、操作桿、光學(xué)或者軌跡球信號(hào)輸入。具體地，輸入單元130可包括觸敏表面131以及其他輸入設(shè)備132。觸敏表面131，也稱(chēng)為觸摸顯示屏或者觸控板，可收集用戶(hù)在其上或附近的觸摸操作(比如用戶(hù)使用手指、觸筆等任何適合的物體或附件在觸敏表面131上或在觸敏表面131附近的操作)，并根據(jù)預(yù)先設(shè)定的程式驅(qū)動(dòng)相應(yīng)的連接裝置。可選的，觸敏表面131可包括觸摸檢測(cè)裝置和觸摸控制器兩個(gè)部分。其中，觸摸檢測(cè)裝置檢測(cè)用戶(hù)的觸摸方位，并檢測(cè)觸摸操作帶來(lái)的信號(hào)，將信號(hào)傳送給觸摸控制器；觸摸控制器從觸摸檢測(cè)裝置上接收觸摸信息，并將它轉(zhuǎn)換成觸點(diǎn)坐標(biāo)，再送給處理器180，并能接收處理器180發(fā)來(lái)的命令并加以執(zhí)行。此外，可以采用電阻式、電容式、紅外線以及表面聲波等多種類(lèi)型實(shí)現(xiàn)觸敏表面131。除了觸敏表面131，輸入單元130還可以包括其他輸入設(shè)備132。具體地，其他輸入設(shè)備132可以包括但不限于物理鍵盤(pán)、功能鍵(比如音量控制按鍵、開(kāi)關(guān)按鍵等)、軌跡球、鼠標(biāo)、操作桿等中的一種或多種。
[0024]顯示單元140可用于顯示由用戶(hù)輸入的信息或提供給用戶(hù)的信息以及移動(dòng)終端1200的各種圖形用戶(hù)接口，這些圖形用戶(hù)接口可以由圖形、文本、圖標(biāo)、視頻和其任意組合來(lái)構(gòu)成。顯示單元140可包括顯示面板141,可選的，可以采用IXD(Liquid CrystalDisplay,液晶顯示器)、OLED (Organic Light-Emitting D1de,有機(jī)發(fā)光二極管)等形式來(lái)配置顯示面板141。進(jìn)一步的，觸敏表面131可覆蓋顯示面板141，當(dāng)觸敏表面131檢測(cè)到在其上或附近的觸摸操作后，傳送給處理器180以確定觸摸事件的類(lèi)型，隨后處理器180根據(jù)觸摸事件的類(lèi)型在顯示面板141上提供相應(yīng)的視覺(jué)輸出。雖然在圖2中，觸敏表面131與顯示面板141是作為兩個(gè)獨(dú)立的部件來(lái)實(shí)現(xiàn)輸入和輸入功能，但是在某些實(shí)施例中，可以將觸敏表面131與顯示面板141集成而實(shí)現(xiàn)輸入和輸出功能。
[0025]處理器180是移動(dòng)終端1200的控制中心，利用各種接口和線路連接整個(gè)手機(jī)的各個(gè)部分，通過(guò)運(yùn)行或執(zhí)行存儲(chǔ)在存儲(chǔ)器120內(nèi)的軟件程序和/或模塊，以及調(diào)用存儲(chǔ)在存儲(chǔ)器120內(nèi)的數(shù)據(jù)，執(zhí)行移動(dòng)終端1200的各種功能和處理數(shù)據(jù)，從而對(duì)手機(jī)進(jìn)行整體監(jiān)控?？蛇x的，處理器180可包括一個(gè)或多個(gè)處理核心；優(yōu)選的，處理器180可集成應(yīng)用處理器和調(diào)制解調(diào)處理器，其中，應(yīng)用處理器主要處理操作系統(tǒng)、用戶(hù)界面和應(yīng)用程序等，調(diào)制解調(diào)處理器主要處理無(wú)線通信。可以理解的是，上述調(diào)制解調(diào)處理器也可以不集成到處理器180中。
[0026]移動(dòng)終端1200還包括給各個(gè)部件供電的電源190(比如電池)，優(yōu)選的，電源可以通過(guò)電源管理系統(tǒng)與處理器180邏輯相連，從而通過(guò)電源管理系統(tǒng)實(shí)現(xiàn)管理充電、放電、以及功耗管理等功能。電源190還可以包括一個(gè)或一個(gè)以上的直流或交流電源、再充電系統(tǒng)、電源故障檢測(cè)電路、電源轉(zhuǎn)換器或者逆變器、電源狀態(tài)指示器等任意組件。
[0027]請(qǐng)參閱圖3，其為本發(fā)明實(shí)施例的一種頁(yè)面頂部輸入框調(diào)整方法的流程圖，在本發(fā)明后續(xù)的實(shí)施例中，為便于描述，以fixed元素作為固定屏幕位置的標(biāo)簽，fixed元素是CSS (Cascading Style Sheets,層疊樣式表)指定屏幕位置的一種標(biāo)簽，但本領(lǐng)域技術(shù)人員可以理解，固定屏幕位置的標(biāo)簽并不以fixed元素為限，也可以是其它類(lèi)型的標(biāo)簽。本實(shí)施例的方法包括以下步驟:
[0028]S301，根據(jù)瀏覽器排版引擎對(duì)頁(yè)面內(nèi)容的解析，獲取預(yù)設(shè)的用于保存fixed元素參數(shù)的數(shù)組。
[0029]當(dāng)用戶(hù)通過(guò)瀏覽器打開(kāi)網(wǎng)頁(yè)時(shí)，瀏覽器的排版引擎(例如webkit)會(huì)對(duì)頁(yè)面數(shù)據(jù)進(jìn)行解析，并生成dom樹(shù)和render樹(shù)，dom樹(shù)用于描述頁(yè)面的信息,而render樹(shù)則用于布局，具體負(fù)責(zé)dom樹(shù)如何顯示在屏幕上。在render樹(shù)的根節(jié)點(diǎn)renderview節(jié)點(diǎn)(渲染視圖節(jié)點(diǎn)，也即是fixed元素的父節(jié)點(diǎn))中預(yù)定義一個(gè)數(shù)組，該數(shù)組用來(lái)保存fixed元素的參數(shù)，在頁(yè)面解析的過(guò)程中，頁(yè)面中的每一個(gè)fixed元素的參數(shù)均被保存到這個(gè)數(shù)組中。而當(dāng)頁(yè)面解析完成后，便可以從renderview節(jié)點(diǎn)中提取出該數(shù)組。
[0030]S302，遍歷獲取的所述數(shù)組，判斷是否有fixed元素位于頁(yè)面頂部區(qū)域。
[0031]數(shù)組中保存的fixed元素的參數(shù)，其中包含了 fixed元素的位置參數(shù)，通過(guò)位置參數(shù)，便可以獲知數(shù)組中的各個(gè)fixed元素所顯示的屏幕位置。所述的頁(yè)面頂部區(qū)域可以根據(jù)實(shí)際需要來(lái)設(shè)置，例如距離頁(yè)面頂部一定寬度的區(qū)域，fixed元素通常顯示為矩形形狀，根據(jù)fixed元素的位置參數(shù)，當(dāng)檢測(cè)到數(shù)組中的一個(gè)fixed元素處于該頁(yè)面頂部區(qū)域內(nèi)，或者該fixed元素的一部分與頁(yè)面頂部區(qū)域內(nèi)重合，則判定該fixed元素位于頁(yè)面頂部區(qū)域，否則繼續(xù)檢查下一個(gè)fixed元素。
[0032]S303，當(dāng)有fixed元素位于頁(yè)面頂部區(qū)域時(shí)，則將頁(yè)面頂部區(qū)域的輸入框被點(diǎn)擊后生成的輸入框控件設(shè)置成顯示在所述fixed元素的下方。
[0033]本實(shí)施例對(duì)輸入框控件顯示位置的設(shè)置揭示了兩種方式:
[0034]第一種方式，根據(jù)頂部的fixed元素的高度，調(diào)整頁(yè)面可視區(qū)域的顯示高度，并使頁(yè)面頂部的輸入框顯示在頂部的fixed元素的下方。例如在android系統(tǒng)中，可以通過(guò)系統(tǒng)函數(shù)ge