一種提示表單填寫(xiě)進(jìn)度的方法和裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及瀏覽器領(lǐng)域，尤其涉及一種提示表單填寫(xiě)進(jìn)度的方法和裝置。
【背景技術(shù)】
[0002]瀏覽器是人們?cè)L問(wèn)互聯(lián)網(wǎng)的必備工具，用于顯示網(wǎng)頁(yè)服務(wù)器或者文件系統(tǒng)的HTML文件(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用)內(nèi)容，并讓用戶(hù)與這些文件交互的一種軟件工具。用戶(hù)在填寫(xiě)表單時(shí)候，需要在頁(yè)面上停留一段時(shí)間，現(xiàn)行很多網(wǎng)站對(duì)于表單填寫(xiě)界面設(shè)計(jì)比較簡(jiǎn)單，單一?，F(xiàn)有技術(shù)中有些瀏覽器中設(shè)置進(jìn)度條用于提示輸入進(jìn)度，但是該進(jìn)度條只是單純對(duì)表單操作的一個(gè)反應(yīng)，或是對(duì)進(jìn)度加載的一個(gè)形象體現(xiàn)，并無(wú)實(shí)際意義，只是起到趣味性的效果。

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

[0003]本發(fā)明的主要目的在于提出一種提示表單填寫(xiě)進(jìn)度的方法和裝置，旨在現(xiàn)有技術(shù)中表單填寫(xiě)界面和進(jìn)度條設(shè)計(jì)比較簡(jiǎn)單，不能很好的體現(xiàn)表單填寫(xiě)情況的問(wèn)題。
[0004]為實(shí)現(xiàn)上述目的，本發(fā)明提供的一種提示表單填寫(xiě)進(jìn)度的方法，包含以下步驟，
[0005]獲取預(yù)先定義的表單及表單中的表單項(xiàng)；
[0006]獲得每個(gè)表單項(xiàng)對(duì)應(yīng)滾動(dòng)條在進(jìn)度條總長(zhǎng)中所占的長(zhǎng)度；
[0007]每獲得一個(gè)表單項(xiàng)被填入內(nèi)容的命令，進(jìn)度條上增加相應(yīng)表單項(xiàng)的滾動(dòng)條長(zhǎng)度并對(duì)所述滾動(dòng)條填充顏色。
[0008]進(jìn)一步的，每獲得一個(gè)表單項(xiàng)被填入內(nèi)容的命令后，檢測(cè)表單項(xiàng)被填入內(nèi)容的格式是否符合預(yù)定義格式，如果是，滾動(dòng)條被填充代表正確狀態(tài)的顏色；否則滾動(dòng)條被填充代表錯(cuò)誤狀態(tài)的顏色。
[0009]進(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)。
[0010]進(jìn)一步的，表單項(xiàng)中的內(nèi)容被清除時(shí)，回滾表單項(xiàng)相應(yīng)滾動(dòng)條，清除標(biāo)記。
[0011]進(jìn)一步的，獲取預(yù)先定義的表單的方法為DOM的document.getElementByld的方法。
[0012]進(jìn)一步的，獲取預(yù)先定義的表單中的表單項(xiàng)的方法為querySelectorAll方法。
[0013]此外，為實(shí)現(xiàn)上述目的，本發(fā)明還提出一種提示表單填寫(xiě)進(jìn)度的裝置，包含，
[0014]獲取單元，設(shè)置為獲取預(yù)先定義的表單及表單中的表單項(xiàng)；
[0015]計(jì)算單元，設(shè)置為計(jì)算每個(gè)表單項(xiàng)對(duì)應(yīng)滾動(dòng)條在進(jìn)度條總長(zhǎng)中所占的長(zhǎng)度；
[0016]滾動(dòng)與填色執(zhí)行單元，設(shè)置為每獲得一個(gè)表單項(xiàng)被填入內(nèi)容的命令，進(jìn)度條上增加相應(yīng)表單項(xiàng)的滾動(dòng)條長(zhǎng)度并對(duì)所述滾動(dòng)條填充顏色。
[0017]進(jìn)一步的，每獲得一個(gè)表單項(xiàng)被填入內(nèi)容的命令后，檢測(cè)表單項(xiàng)被填入內(nèi)容的格式是否符合預(yù)定義格式，如果是，滾動(dòng)條被填充代表正確狀態(tài)的顏色；否則滾動(dòng)條被填充代表錯(cuò)誤狀態(tài)的顏色。
[0018]進(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)。
[0019]進(jìn)一步的，表單項(xiàng)中的內(nèi)容被清除時(shí)，回滾表單項(xiàng)相應(yīng)滾動(dòng)條，清除標(biāo)記。
[0020]本發(fā)明提出的提示表單填寫(xiě)進(jìn)度的方法和裝置，在表單填寫(xiě)界面添加了一個(gè)進(jìn)度條設(shè)計(jì)，進(jìn)度條精確體現(xiàn)表單填寫(xiě)進(jìn)度及填寫(xiě)是否正確，當(dāng)用戶(hù)輸入表單項(xiàng)內(nèi)容時(shí)，進(jìn)度條也跟滾動(dòng)，直到用戶(hù)把所有文本框輸入完成后，進(jìn)度條也就全部加載完，且對(duì)表單項(xiàng)填寫(xiě)正確或錯(cuò)誤給出清晰的提示，并幫助用戶(hù)快速找到填寫(xiě)錯(cuò)誤的表單項(xiàng)位置，使用非常方便。
【附圖說(shuō)明】
[0021]圖1為本發(fā)明實(shí)施例一提供的提示表單填寫(xiě)進(jìn)度的方法流程示意圖；
[0022]圖2為本發(fā)明實(shí)施例二提供的提示表單填寫(xiě)進(jìn)度的方法流程示意圖；
[0023]圖3為本發(fā)明實(shí)施例三提供的提示表單填寫(xiě)進(jìn)度的裝置結(jié)構(gòu)示意圖；
[0024]圖4為本發(fā)明實(shí)施例四提供的提示表單填寫(xiě)進(jìn)度的裝置結(jié)構(gòu)示意圖；
[0025]本發(fā)明目的的實(shí)現(xiàn)、功能特點(diǎn)及優(yōu)點(diǎn)將結(jié)合實(shí)施例，參照附圖做進(jìn)一步說(shuō)明。
【具體實(shí)施方式】
[0026]應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0027]在后續(xù)的描述中，使用用于表示元件的諸如“模塊”、“部件”或“單元”的后綴僅為了有利于本發(fā)明的說(shuō)明，其本身并沒(méi)有特定的意義。因此，"模塊〃與〃部件〃可以混合地使用。
[0028]實(shí)施例一
[0029]如圖1所示，本發(fā)明實(shí)施例一提出一種提示表單填寫(xiě)進(jìn)度的方法，包括:
[0030]S101，獲取預(yù)先定義的表單及表單中的表單項(xiàng)；
[0031]具體的，通過(guò)DOM的document.getElementByld的方法獲取預(yù)先定義的表單(如:#from),然后通過(guò)querySelectorAll方法獲取預(yù)定義表單中存在的表單項(xiàng)。
[0032]S102，獲得每個(gè)表單項(xiàng)對(duì)應(yīng)滾動(dòng)條在進(jìn)度條總長(zhǎng)中所占的長(zhǎng)度；
[0033]具體的，進(jìn)度條代表整個(gè)表單的完成進(jìn)度，整個(gè)表單的所有表單項(xiàng)都為空時(shí)，進(jìn)度條顯示完成進(jìn)度0%，整個(gè)表單全部表單項(xiàng)都填充完成時(shí)，進(jìn)度條滾動(dòng)完成100%。表單內(nèi)的每個(gè)表單項(xiàng)在進(jìn)度條中所占有的長(zhǎng)度百分比或者百分比長(zhǎng)度為進(jìn)度條的總長(zhǎng)度除以表單上的表單項(xiàng)數(shù)獲得，即每個(gè)表單項(xiàng)對(duì)應(yīng)的滾動(dòng)條的長(zhǎng)度。
[0034]S103，每獲得一個(gè)表單項(xiàng)被填入內(nèi)容的命令，進(jìn)度條上增加相應(yīng)表單項(xiàng)的滾動(dòng)條長(zhǎng)度并對(duì)所述滾動(dòng)條填充顏色。
[0035]具體的，當(dāng)用戶(hù)在表單中的表單項(xiàng)中填充內(nèi)容，例如在填寫(xiě)文本框、文本區(qū)域或單選、多選、下拉框等操作，每在一項(xiàng)表單項(xiàng)內(nèi)填入內(nèi)容，進(jìn)度條滾動(dòng)該表單項(xiàng)在進(jìn)度條中所占的百分比長(zhǎng)度，即滾動(dòng)表單項(xiàng)對(duì)應(yīng)滾動(dòng)條長(zhǎng)度，同時(shí)對(duì)滾動(dòng)條填充顏色。然后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)條加載速度
[0036]當(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)度。
[0037]以上實(shí)現(xiàn)的提示表單填寫(xiě)進(jìn)度的方法，通過(guò)進(jìn)度條按照表單項(xiàng)完成的情況加載長(zhǎng)度，來(lái)展示用戶(hù)填寫(xiě)表單的進(jìn)度，用戶(hù)填寫(xiě)完所有表單項(xiàng)，進(jìn)度條加載完成100% ;進(jìn)度條的分塊顏色可以展示用戶(hù)輸入內(nèi)容的格式不正確的表單項(xiàng)，點(diǎn)擊進(jìn)度條上帶有警示的色塊可將鼠標(biāo)的光標(biāo)定位到相應(yīng)的表單項(xiàng)以便用戶(hù)進(jìn)行修改，大大提升了進(jìn)度條的提示性能，幫助人們簡(jiǎn)便、直觀(guān)了解表單的完成進(jìn)度以及完成準(zhǔn)確性。
[0038]實(shí)施例二
[0039]參照?qǐng)D2，本發(fā)明實(shí)施例二提出一種提示表單填寫(xiě)進(jìn)度的方法，包括:
[0040]S201，獲取預(yù)先定義的表單及表單中的表單項(xiàng)；
[0041]S202，獲得每個(gè)表單項(xiàng)對(duì)應(yīng)滾動(dòng)條在進(jìn)度條總長(zhǎng)中所占的長(zhǎng)度；
[0042]S203，每獲得一個(gè)表單項(xiàng)被填入內(nèi)容的命令，進(jìn)度條上增加相應(yīng)表單項(xiàng)的滾動(dòng)條長(zhǎng)度并對(duì)所述滾動(dòng)條填充顏色；
[0043]S204，每獲得一個(gè)表單項(xiàng)被填入內(nèi)容的命令后，檢測(cè)表單項(xiàng)被填入內(nèi)容的格式是否符合預(yù)定義格式，如果是，滾動(dòng)條被填充代表正確狀態(tài)的顏色；否則滾動(dòng)條被填充代表錯(cuò)誤狀態(tài)的顏色；
[0044]具體的，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)條加載速度。
[0045]S205，每個(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)。
[0046]具體的，將該表單項(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)記。
[0047