]以上實(shí)現(xiàn)的提示表單填寫(xiě)進(jìn)度的方法，通過(guò)點(diǎn)擊進(jìn)度條上帶有警示的色塊可將鼠標(biāo)的光標(biāo)定位到相應(yīng)的表單項(xiàng)以便用戶(hù)進(jìn)行修改，大大提升了用戶(hù)的糾錯(cuò)效率。
[0048]實(shí)施例三
[0049]參照?qǐng)D3，本發(fā)明實(shí)施例三提出一種提示表單填寫(xiě)進(jìn)度的裝置，包含獲取單元10，計(jì)算單元20，滾動(dòng)與填色執(zhí)行單元30。
[0050]獲取單元10，設(shè)置為獲取預(yù)先定義的表單及表單中的表單項(xiàng)；
[0051]具體的，獲取單元10通過(guò)DOM的document.getElementByld的方法獲取預(yù)先定義的表單(如:#from),然后通過(guò)querySelectorAll方法獲取預(yù)定義表單中存在的表單項(xiàng)。
[0052]計(jì)算單元20，設(shè)置為計(jì)算每個(gè)表單項(xiàng)對(duì)應(yīng)滾動(dòng)條在進(jìn)度條總長(zhǎng)中所占的長(zhǎng)度；
[0053]具體的，進(jìn)度條代表整個(gè)表單的完成進(jìn)度，整個(gè)表單的所有表單項(xiàng)都為空時(shí)，進(jìn)度條顯示完成進(jìn)度0%，整個(gè)表單全部表單項(xiàng)都填充內(nèi)容時(shí)，進(jìn)度條滾動(dòng)完成100%。計(jì)算單元20根據(jù)進(jìn)度條的總長(zhǎng)度除以表單上的表單項(xiàng)數(shù)獲得表單內(nèi)的每個(gè)表單項(xiàng)在進(jìn)度條中所占有的長(zhǎng)度百分比或者百分比長(zhǎng)度，即每個(gè)表單項(xiàng)對(duì)應(yīng)的滾動(dòng)條的長(zhǎng)度。
[0054]滾動(dòng)與填色執(zhí)行單元30，設(shè)置為每獲得一個(gè)表單項(xiàng)被填入內(nèi)容的命令，進(jìn)度條上增加相應(yīng)表單項(xiàng)的滾動(dòng)條長(zhǎng)度并對(duì)所述滾動(dòng)條填充顏色。
[0055]具體的，當(dāng)用戶(hù)在表單中的表單項(xiàng)中填充內(nèi)容，例如在在填寫(xiě)文本框、文本區(qū)域或單選、多選、下拉框等操作，每操作完一項(xiàng)表單項(xiàng)，滾動(dòng)與填色執(zhí)行單元30執(zhí)行滾動(dòng)該表單項(xiàng)在進(jìn)度條中所占的百分比長(zhǎng)度，并填充顏色。Javascript腳本判斷判斷表單項(xiàng)中填充內(nèi)容格式是否正確，將填寫(xiě)正確格式內(nèi)容的表單項(xiàng)在進(jìn)度條中滾動(dòng)的填充顏色設(shè)置為一種顏色，比如藍(lán)色，如果檢測(cè)到用戶(hù)輸入內(nèi)容的格式不符合預(yù)先定義的格式，則在進(jìn)度條中滾動(dòng)的填充顏色設(shè)置為另一種顏色，比如紅色，這樣用戶(hù)在填寫(xiě)表單項(xiàng)中即可知道填寫(xiě)格式是否正確，如果填寫(xiě)內(nèi)容格式不正確，可以及時(shí)修改，縮短糾錯(cuò)時(shí)間。進(jìn)度條的滾動(dòng)速度基于CSS3過(guò)渡屬性設(shè)置，可以通過(guò)修改頁(yè)面樣式屬性值改變滾動(dòng)條加載速度。在需要更改表單項(xiàng)填寫(xiě)內(nèi)容時(shí)，需要將先前填寫(xiě)的內(nèi)容清除，當(dāng)用戶(hù)清除表單項(xiàng)文本框中內(nèi)容時(shí)，表單項(xiàng)對(duì)應(yīng)的滾動(dòng)條回滾相應(yīng)百分比長(zhǎng)度。
[0056]實(shí)施例四
[0057]參照?qǐng)D4，本發(fā)明實(shí)施例四提出一種提示表單填寫(xiě)進(jìn)度的裝置，包含獲取單元10，計(jì)算單元20，滾動(dòng)與填色執(zhí)行單元30以及標(biāo)記單元50和清除單元60，格式判斷單元40。
[0058]獲取單元10，計(jì)算單元20，滾動(dòng)與填色執(zhí)行單元30與實(shí)施例三相同，在此不再贅述。
[0059]格式判斷單元40，設(shè)置為每獲得一個(gè)表單項(xiàng)被填入內(nèi)容的命令后，檢測(cè)表單項(xiàng)被填入內(nèi)容的格式是否符合預(yù)定義格式，如果是，滾動(dòng)條被填充代表正確狀態(tài)的顏色；否則滾動(dòng)條被填充代表錯(cuò)誤狀態(tài)的顏色。
[0060]具體的，Javascript腳本判斷判斷表單項(xiàng)中填充內(nèi)容格式是否正確，即填充內(nèi)容的格式是否與預(yù)定義的格式一致，將填寫(xiě)正確格式內(nèi)容的表單項(xiàng)在進(jìn)度條中滾動(dòng)的填充顏色設(shè)置為一種顏色，比如藍(lán)色，如果檢測(cè)到用戶(hù)輸入內(nèi)容的格式不符合預(yù)先定義的格式，則在進(jìn)度條中滾動(dòng)的填充顏色設(shè)置為另一種顏色，比如紅色，這樣用戶(hù)在填寫(xiě)表單項(xiàng)中即可知道填寫(xiě)格式是否正確，如果填寫(xiě)內(nèi)容格式不正確，可以及時(shí)修改，縮短糾錯(cuò)時(shí)間。進(jìn)度條的滾動(dòng)速度基于CSS3過(guò)渡屬性設(shè)置，可以通過(guò)修改頁(yè)面樣式屬性值改變滾動(dòng)條加載速度。
[0061]標(biāo)記單元50，設(shè)置為在所述每個(gè)表單項(xiàng)對(duì)應(yīng)的滾動(dòng)條上設(shè)置一個(gè)標(biāo)記，將所述標(biāo)記與一色塊關(guān)聯(lián)起來(lái)，用于點(diǎn)擊該色塊時(shí)將鼠標(biāo)的光標(biāo)定位到關(guān)聯(lián)的表單項(xiàng)。
[0062]清除單元60，設(shè)置為當(dāng)表單項(xiàng)中的內(nèi)容被清除時(shí)，回滾表單項(xiàng)相應(yīng)滾動(dòng)條，清除標(biāo)記。
[0063]具體的，標(biāo)記單元40將該表單項(xiàng)對(duì)應(yīng)的滾動(dòng)條區(qū)域上定義一個(gè)標(biāo)記，將關(guān)聯(lián)的表單項(xiàng)與色塊關(guān)聯(lián)起來(lái)，點(diǎn)擊該色塊可將鼠標(biāo)的光標(biāo)定位到關(guān)聯(lián)的表單項(xiàng)，幫助用戶(hù)快速找到表單項(xiàng)所處的位置，進(jìn)一步縮短糾錯(cuò)、檢查時(shí)間。在需要更改表單項(xiàng)填寫(xiě)內(nèi)容時(shí)，需要將先前填寫(xiě)的內(nèi)容清除，當(dāng)用戶(hù)清除表單項(xiàng)文本框中內(nèi)容時(shí)，表單項(xiàng)對(duì)應(yīng)的滾動(dòng)條回滾相應(yīng)百分比長(zhǎng)度，同時(shí)清除對(duì)應(yīng)的關(guān)聯(lián)與標(biāo)記。
[0064]以上實(shí)現(xiàn)的提示表單填寫(xiě)進(jìn)度的裝置，不僅提示用戶(hù)填寫(xiě)表單的進(jìn)度，還提升了用戶(hù)與網(wǎng)站界面的交互效率，提高了用戶(hù)操作體驗(yàn)。
[0065]需要說(shuō)明的是，在本文中，術(shù)語(yǔ)“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過(guò)程、方法、物品或者裝置不僅包括那些要素，而且還包括沒(méi)有明確列出的其他要素，或者是還包括為這種過(guò)程、方法、物品或者裝置所固有的要素。在沒(méi)有更多限制的情況下，由語(yǔ)句“包括一個(gè)……”限定的要素，并不排除在包括該要素的過(guò)程、方法、物品或者裝置中還存在另外的相同要素。
[0066]上述本發(fā)明實(shí)施例序號(hào)僅僅為了描述，不代表實(shí)施例的優(yōu)劣。
[0067]通過(guò)以上的實(shí)施方式的描述，本領(lǐng)域的技術(shù)人員可以清楚地了解到上述實(shí)施例方法可借助軟件加必需的通用硬件平臺(tái)的方式來(lái)實(shí)現(xiàn)，當(dāng)然也可以通過(guò)硬件，但很多情況下前者是更佳的實(shí)施方式?；谶@樣的理解，本發(fā)明的技術(shù)方案本質(zhì)上或者說(shuō)對(duì)現(xiàn)有技術(shù)做出貢獻(xiàn)的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來(lái)，該計(jì)算機(jī)軟件產(chǎn)品存儲(chǔ)在一個(gè)存儲(chǔ)介質(zhì)(如R0M/RAM、磁碟、光盤(pán))中，包括若干指令用以使得一臺(tái)終端設(shè)備(可以是手機(jī)，計(jì)算機(jī)，服務(wù)器，空調(diào)器，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個(gè)實(shí)施例所述的方法。
[0068]以上僅為本發(fā)明的優(yōu)選實(shí)施例，并非因此限制本發(fā)明的專(zhuān)利范圍，凡是利用本發(fā)明說(shuō)明書(shū)及附圖內(nèi)容所作的等效結(jié)構(gòu)或等效流程變換，或直接或間接運(yùn)用在其他相關(guān)的技術(shù)領(lǐng)域，均同理包括在本發(fā)明的專(zhuān)利保護(hù)范圍內(nèi)。
【主權(quán)項(xiàng)】
1.一種提示表單填寫(xiě)進(jìn)度的方法，其特征在于包含以下步驟， 獲取預(yù)先定義的表單及表單中的表單項(xiàng)； 獲得每個(gè)表單項(xiàng)對(duì)應(yīng)滾動(dòng)條在進(jìn)度條總長(zhǎng)中所占的長(zhǎng)度； 每獲得一個(gè)表單項(xiàng)被填入內(nèi)容的命令，進(jìn)度條上增加相應(yīng)表單項(xiàng)的滾動(dòng)條長(zhǎng)度并對(duì)所述滾動(dòng)條填充顏色。2.根據(jù)權(quán)利要求1所述的提示表單填寫(xiě)進(jìn)度的方法，其特征在于，每獲得一個(gè)表單項(xiàng)被填入內(nèi)容的命令后，檢測(cè)表單項(xiàng)被填入內(nèi)容的格式是否符合預(yù)定義格式，如果是，滾動(dòng)條被填充代表正確狀態(tài)的顏色；否則滾動(dòng)條被填充代表錯(cuò)誤狀態(tài)的顏色。3.根據(jù)權(quán)利要求1所述的提示表單填寫(xiě)進(jìn)度的方法，其特征在于，所述每個(gè)表單項(xiàng)對(duì)應(yīng)的滾動(dòng)條上設(shè)置一個(gè)標(biāo)記，將所述標(biāo)記與一色塊關(guān)聯(lián)起來(lái)，用于點(diǎn)擊該色塊時(shí)將鼠標(biāo)的光標(biāo)定位到關(guān)聯(lián)的表單項(xiàng)。4.根據(jù)權(quán)利要求3所述的提示表單填寫(xiě)進(jìn)度的方法，其特征在于，表單項(xiàng)中的內(nèi)容被清除時(shí)，回滾表單項(xiàng)相應(yīng)滾動(dòng)條，清除標(biāo)記。5.根據(jù)權(quán)利要求1所述的提示表單填寫(xiě)進(jìn)度的方法，其特征在于，獲取預(yù)先定義的表單的方法為DOM的document.getElementByld的方法。6.根據(jù)權(quán)利要求1所述的提示表單填寫(xiě)進(jìn)度的方法，其特征在于，獲取預(yù)先定義的表單中的表單項(xiàng)的方法為querySelectorAll方法。7.一種提示表單填寫(xiě)進(jìn)度的裝置，其特征在于包含， 獲取單元，設(shè)置為獲取預(yù)先定義的表單及表單中的表單項(xiàng)； 計(jì)算單元，設(shè)置為計(jì)算每個(gè)表單項(xiàng)對(duì)應(yīng)滾動(dòng)條在進(jìn)度條總長(zhǎng)中所占的長(zhǎng)度； 滾動(dòng)與填色執(zhí)行單元，設(shè)置為每獲得一個(gè)表單項(xiàng)被填入內(nèi)容的命令，進(jìn)度條上增加相應(yīng)表單項(xiàng)的滾動(dòng)條長(zhǎng)度并對(duì)所述滾動(dòng)條填充顏色。8.根據(jù)權(quán)利要求7所述的提示表單填寫(xiě)進(jìn)度的裝置，其特征在于:還包含格式判斷單元，設(shè)置為每獲得一個(gè)表單項(xiàng)被填入內(nèi)容的命令后，檢測(cè)表單項(xiàng)被填入內(nèi)容的格式是否符合預(yù)定義格式，如果是，滾動(dòng)條被填充代表正確狀態(tài)的顏色；否則滾動(dòng)條被填充代表錯(cuò)誤狀態(tài)的顏色。9.根據(jù)權(quán)利要求7所述的提示表單填寫(xiě)進(jìn)度的裝置，其特征在于:所述每個(gè)表單項(xiàng)對(duì)應(yīng)的滾動(dòng)條上設(shè)置一個(gè)標(biāo)記，將所述標(biāo)記與一色塊關(guān)聯(lián)起來(lái)，用于點(diǎn)擊該色塊時(shí)將鼠標(biāo)的光標(biāo)定位到關(guān)聯(lián)的表單項(xiàng)。10.根據(jù)權(quán)利要求9所述的提示表單填寫(xiě)進(jìn)度的裝置，其特征在于:表單項(xiàng)中的內(nèi)容被清除時(shí)，回滾表單項(xiàng)相應(yīng)滾動(dòng)條，清除標(biāo)記。
【專(zhuān)利摘要】本發(fā)明公開(kāi)了一種提示表單填寫(xiě)進(jìn)度的方法和裝置，屬于瀏覽器領(lǐng)域，包含獲取預(yù)先定義的表單及表單中的表單項(xiàng)；獲得每個(gè)表單項(xiàng)對(duì)應(yīng)滾動(dòng)條在進(jìn)度條總長(zhǎng)中所占的長(zhǎng)度；每獲得一個(gè)表單項(xiàng)被填入內(nèi)容的命令，進(jìn)度條上增加相應(yīng)表單項(xiàng)的滾動(dòng)條長(zhǎng)度并對(duì)所述滾動(dòng)條填充顏色。本發(fā)明不僅提示用戶(hù)填寫(xiě)表單的進(jìn)度，還提升了用戶(hù)與網(wǎng)站界面的交互效率，提升了用戶(hù)操作體驗(yàn)。
【IPC分類(lèi)】G06F3/0484, G06F3/0481
【公開(kāi)號(hào)】CN105045464
【申請(qǐng)?zhí)枴緾N201510368492
【發(fā)明人】鄭茂鐘
【申請(qǐng)人】努比亞技術(shù)有限公司
【公開(kāi)日】2015年11月11日
【申請(qǐng)日】2015年6月29日