一種密碼登錄組件的制作方法
【專利摘要】本發(fā)明公開了一種密碼登錄組件，包括：密碼儲存模塊、密碼顯示參數(shù)配置模塊；所述密碼存儲模塊包括多個密碼輸入框，所述每個密碼輸入框可輸入數(shù)目相同的字符，且其具有唯一的ID；所述密碼顯示參數(shù)配置模塊，用于為所述每個密碼輸入框配置參數(shù)以及用于設(shè)置所述密碼存儲模塊的長度、高度及具有分界的顯示風(fēng)格。本發(fā)明實施例通過或設(shè)置密碼存儲模塊和/或密碼輸入框不同的顯示風(fēng)格，或設(shè)置占位符的不同屬性，使用戶在輸入密碼時能夠清楚地知道輸入到哪一位密碼，在輸入較長的密碼被打斷時，也可較清楚直觀地知道自己輸入到哪一位密碼字符。提高了用戶體驗。
【專利說明】—種密碼登錄組件【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及密碼登錄顯示技術(shù)，尤其涉及一種密碼登錄組件。
【背景技術(shù)】
[0002]傳統(tǒng)的HTML(Hypertext Maker Language,超文本標(biāo)記語言)頁面的密碼輸入框使用〈input type=”password”/>控件實現(xiàn),其功能僅僅是將輸入的密碼內(nèi)容以星號掩碼代替，避免直接顯示密碼被他人讀取，以達(dá)到保護(hù)密碼的目的。HTML的密碼控件在外觀上雖然支持CSS樣式(級聯(lián)樣式表)，但也只能對控件外觀進(jìn)行整體設(shè)置，而無法實現(xiàn)對密碼內(nèi)容的個性化設(shè)置。對于較長的密碼，在輸入密碼的過程中被打斷，無法及時獲知輸入到哪一位，特別是對于要求輸入校驗碼的情況下，若因密碼輸入間斷時不清楚輸入到哪一位而導(dǎo)致密碼輸入錯誤的，將導(dǎo)致頁面刷新而不得不再次輸入賬戶名、密碼及校驗碼等有關(guān)信息，不利于提聞用戶體驗。

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

[0003]本發(fā)明所要解決的技術(shù)問題在于，提供一種密碼登錄組件，在輸入密碼的過程中，可較直觀地獲知輸入密碼的位數(shù)，避免因輸入過程的間斷而需要重新輸入密碼時不能直觀得知已經(jīng)輸入到哪一位的問題。
[0004]為了解決上述技術(shù)問題，一方面，本發(fā)明的實施例提供了一種密碼登錄組件，包括:密碼儲存模塊、密碼顯示參數(shù)配置模塊；所述密碼存儲模塊包括多個密碼輸入框，所述每個密碼輸入框可輸入數(shù)目相同的密碼字符，且其具有唯一的ID ;所述密碼顯示參數(shù)配置模塊，用于為所述密碼存儲模塊和/或所述每個密碼輸入框配置具有分界顯示風(fēng)格的參數(shù)。`
[0005]所述密碼儲存模塊為div容器。
[0006]所述密碼顯示參數(shù)配置模塊為所述每個密碼輸入框配置的參數(shù)包括可輸入的字符數(shù)目、背景顯示、占位符類型、占位符顏色中的一種或多種。
[0007]所述每個密碼輸入框可輸入密碼字符的數(shù)目為一個。
[0008]所述密碼輸入框中輸入的字符居中顯示。
[0009]所述密碼存儲模塊不顯示滾動條。
[0010]所述密碼存儲模塊的顯示風(fēng)格包括數(shù)字背景顯示風(fēng)格及顏色交替風(fēng)格。
[0011]所有密碼存儲模塊的顯示風(fēng)格設(shè)置在一張圖片上。
[0012]本發(fā)明實施例具有如下優(yōu)點或有益效果:
[0013]本發(fā)明實施例通過或設(shè)置密碼存儲模塊和/或密碼輸入框具有分界的顯示風(fēng)格，或設(shè)置占位符的不同屬性，使用戶在輸入密碼時能夠清楚地知道輸入到哪一位密碼，在輸入較長的密碼被打斷時，也可較清楚直觀地知道自己輸入到哪一位密碼字符。提高了用戶體驗?！緦＠綀D】

【附圖說明】
[0014]為了更清楚地說明本發(fā)明實施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對實施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的一些實施例，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動的前提下，還可以根據(jù)這些附圖獲得其他的附圖。
[0015]圖1本發(fā)明一種實施例中密碼登錄組件的結(jié)構(gòu)框圖；
[0016]圖2本發(fā)明一種實施例中密碼登錄組件的顯示示意圖；
[0017]圖3是本發(fā)明一種實施例中輸入密碼后的密碼登錄組件的顯示示意圖；
[0018]圖4是本發(fā)明另一種實施例中輸入密碼后的密碼登錄組件的顯示示意圖；
[0019]圖5是本發(fā)明實施例中當(dāng)輸入密碼的位數(shù)大于密碼登錄組件顯示位數(shù)時，整體顯不向左移動兩位的不意圖；
[0020]圖6是本發(fā)明實施例中刪除密碼后密碼登錄組件顯示示意圖；
[0021]圖7是圖2實施例中不顯示密碼輸入框之間虛線的密碼登錄組件的顯示示意圖。
【具體實施方式】
[0022]下面將結(jié)合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實施例僅僅是本發(fā)明一部分實施例，而不是全部的實施例?；诒景l(fā)明中的實施例，本領(lǐng)域普通技術(shù)人員在沒有作出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都屬于本發(fā)明保護(hù)的范圍。
[0023]下面參考附圖對本發(fā)明的實施例進(jìn)行描述。參見圖1，為本發(fā)明一種實施例中密碼登錄組件的結(jié)構(gòu)框圖。其中密碼登錄組件包括密碼存儲模塊11、密碼顯示參數(shù)配置模塊12。密碼存儲模塊11包括多個密碼輸入框，每個密碼輸入框可輸入數(shù)目相同的密碼字符，一種較佳的實施方式中每個密碼輸入框可輸入密碼字符的數(shù)目為一個，為了方便說明，下文中以每個密碼輸入框可輸入的字符數(shù)目為I進(jìn)行說明，不作為對本發(fā)明實施例的限制。并且每個密碼輸入框具有其唯一的ID，方便對不同的密碼輸入框的參數(shù)進(jìn)行配置。密碼顯示參數(shù)配置模塊12用于為每個密碼輸入框配置參數(shù)，及用于設(shè)置密碼存儲模塊11的長度、高度及具有分界的顯示風(fēng)格，例如可以設(shè)計密碼存儲模塊11中每6個密碼輸入框為一組，相鄰兩組的密碼輸入框具有不同的顯示風(fēng)格，具體可以是背景顏色不同，也可以是密碼占位符的類型、顏色不同。
[0024]密碼顯示參數(shù)配置模塊12用于設(shè)置密碼存儲模塊11的長度、高度，一種實施方式中設(shè)置密碼存儲模塊11的長度為99，即該密碼存儲模塊最多可容納99個密碼輸入框，若設(shè)置每個密碼輸入框可輸入的字符數(shù)目為一個，則該密碼存儲模塊11最多可支持長度為99的密碼輸入。需要說明的是，密碼顯示參數(shù)配置模塊12還用于設(shè)置密碼存儲模塊11顯示的密碼輸入框的個數(shù)，即在網(wǎng)頁上可以看到的密碼輸入框的個數(shù)。如圖2?6中均以顯示12個密碼輸入框為例。
[0025]另一種實施方式中，通過直接配置密碼輸入框的顯示屬性實現(xiàn)分界。其中，密碼顯示參數(shù)配置模塊12為密碼輸入框配置的參數(shù)包括可輸入的密碼字符數(shù)目、背景顯示的風(fēng)格、密碼占位符類型、密碼占位符顏色中的一種或者多種。例如，密碼顯示參數(shù)配置模塊12可以設(shè)置一個密碼輸入框可輸入的字符數(shù)目為一個，可以設(shè)置密碼占位符為圓點.、正方形、多邊形?、三角形▲、星星☆等各種形狀，可以設(shè)置密碼占位符的顏色為黑色、藍(lán)色、紅色、綠色等各種顏色，密碼顯示參數(shù)配置模塊12還可以設(shè)置密碼輸入框的背景顯示的風(fēng)格，如可將密碼輸入框設(shè)置為藍(lán)色襯底或其他顏色的襯底，需要說明的是，至少有兩個密碼輸入框具有不同的參數(shù)配置，例如對于6個密碼輸入框，可設(shè)置占位符為...▲▲▲，或者設(shè)置為......，或者兩者的結(jié)合...▲▲▲?
[0026]另外，密碼顯示參數(shù)配置模塊12還用于設(shè)置密碼存儲模塊11的背景顯示風(fēng)格，例如可將密碼存儲模塊11的背景設(shè)置為數(shù)字顯示背景，即從左至右分別為每個密碼輸入框編碼，請參考圖2。需要說明的是，圖中顯示的數(shù)字是密碼輸入框中的背景，不影響密碼的輸入，輸入密碼后，由占位符覆蓋該數(shù)字，請參考圖3。另外，可以設(shè)置在網(wǎng)頁上顯示的密碼登錄組件不顯示圖2~圖6中各個密碼輸入框之間的虛線。例如，圖2所對應(yīng)的密碼登錄組件不顯示虛線時則如圖7所示。
[0027]請參考圖4，其中所示為本發(fā)明另一種實施例中密碼登錄組件的顯示示意圖。其中密碼存儲模塊11設(shè)置的背景顯示風(fēng)格為顏色交替風(fēng)格，每隔4個密碼輸入框顯示不同的顏色。需要說明的是，間隔密碼輸入框的數(shù)目可以根據(jù)需要進(jìn)行調(diào)整，如每隔3個或5個密碼輸入框進(jìn)行顏色交替。另外，交替的顏色也可以進(jìn)行設(shè)置，并不限于圖4中所示的黑色與藍(lán)色。
[0028]另外，需要說明的是，密碼顯示參數(shù)配置模塊12可以分別對密碼存儲模塊及密碼輸入框的背景顯示風(fēng)格進(jìn)行設(shè)置，也可以僅對其中之一的背景顯示風(fēng)格進(jìn)行設(shè)置。例如，圖2中的數(shù)字顯示風(fēng)格既可以是將密碼存儲模塊的背景顯示風(fēng)格設(shè)置為數(shù)字顯示風(fēng)格，也可以分別將密碼輸入框的背景顯示風(fēng)格設(shè)置為數(shù)字顯示風(fēng)格。若通過將密碼輸入框的背景顯示風(fēng)格設(shè)置為數(shù)字顯示風(fēng)格，則將第一個密碼輸入框的背景設(shè)置為數(shù)字1、第二個密碼輸入框的背景設(shè)置為數(shù)字2、第三個密碼輸入框的背景設(shè)置為數(shù)字3、第η個密碼輸入框的背景設(shè)置為數(shù)字η。在一種較佳的實施方式中，將各個密碼輸入框的背景顯示風(fēng)格設(shè)置在一張圖片上，從而避免多次加載圖片降低了用戶體驗。
[0029]需要說明的是，設(shè)置密碼輸入框的數(shù)字顯示風(fēng)格是設(shè)置密碼輸入框具有分界顯示風(fēng)格中的一種實施方式，只是分別將每個密碼輸入框作為一組進(jìn)行顯示風(fēng)格設(shè)置。
[0030]在一種較佳的實施例中，密碼存儲模塊11為div容器，其中可以存儲多個密碼輸入框，并設(shè)置該div容器不顯示滾動條，從而使其外觀與現(xiàn)有的密碼輸入框相同。
[0031]在一種較佳的實施例中，設(shè)置密碼輸入框中的內(nèi)容居中顯示。
[0032]請參考圖5，其中所示的為圖3實施例中輸入密碼的位數(shù)為13時，密碼登錄組件的外觀示意圖。其中，當(dāng)輸入的密碼等于或大于密碼登錄組件可顯示的位數(shù)時，所有的密碼輸入框整體向左移動一位，以便將未被占位符覆蓋的密碼輸入框顯露出來，從而方便用戶獲知自己輸入的密碼位數(shù)，提高了用戶體驗。
[0033]圖6中所示為輸入13位密碼后，將第13密碼刪除后，密碼登錄組件的顯示示意圖。即將大于或者等于密碼登錄組件可顯示最大位數(shù)的密碼字符刪除時，所有的密碼輸入框整體向右移動一位。
[0034]本發(fā)明實施例具有如下優(yōu)點或有益效果:
[0035]本發(fā)明實施例通過設(shè)置密碼存儲模塊和/或密碼輸入框不同的顯示風(fēng)格，包括背景顯示風(fēng)格及占位符顯示風(fēng)格，使用戶在輸入密碼時能夠清楚地知道輸入到哪一位密碼，在輸入較長的密碼被打斷時，也可較清楚直觀地知道自己輸入到哪一位密碼字符。提高了用戶體驗。
[0036]以上所描述的裝置實施例僅僅是示意性的，其中所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個地方，或者也可以分布到多個網(wǎng)絡(luò)單元上?？梢愿鶕?jù)實際的需要選擇其中的部分或者全部模塊來實現(xiàn)本實施例方案的目的。本領(lǐng)域普通技術(shù)人員在不付出創(chuàng)造性的勞動的情況下，即可以理解并實施。
[0037]通過以上的實施方式的描述，本領(lǐng)域的技術(shù)人員可以清楚地了解到各實施方式可借助軟件加必需的通用硬件平臺的方式來實現(xiàn)，當(dāng)然也可以通過硬件。基于這樣的理解，上述技術(shù)方案本質(zhì)上或者說對現(xiàn)有技術(shù)做出貢獻(xiàn)的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計算機(jī)軟件產(chǎn)品可以存儲在計算機(jī)可讀存儲介質(zhì)中，如R0M/RAM、磁碟、光盤等，包括若干指令用以使得一臺計算機(jī)設(shè)備(可以是個人計算機(jī)，服務(wù)器，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行各個實施例或者實施例的某些部分所述的方法。
[0038]以上所述的實施方式，并不構(gòu)成對該技術(shù)方案保護(hù)范圍的限定。任何在上述實施方式的精神和原則之內(nèi)所作的修改、等同替換和改進(jìn)等，均應(yīng)包含在該技術(shù)方案的保護(hù)范圍之內(nèi)。
【權(quán)利要求】
1.一種密碼登錄組件，其特征在于，包括:密碼儲存模塊、密碼顯示參數(shù)配置模塊；所述密碼存儲模塊包括多個密碼輸入框，所述每個密碼輸入框可輸入數(shù)目相同的密碼字符，且其具有唯一的ID ;所述密碼顯示參數(shù)配置模塊，用于為所述密碼存儲模塊和/或所述每個密碼輸入框配置具有分界顯示風(fēng)格的參數(shù)。
2.如權(quán)利要求1所述的密碼登錄組件，其特征在于，所述密碼儲存模塊為div容器。
3.如權(quán)利要求1所述的密碼登錄組件，其特征在于，所述密碼顯示參數(shù)配置模塊為所述密碼存儲模塊和/或所述每個密碼輸入框配置的參數(shù)包括可輸入的字符數(shù)目、背景顯示、占位符類型、占位符顏色中的一種或多種。
4.如權(quán)利要求3所述的密碼登錄組件，其特征在于，所述密碼存儲模塊的顯示風(fēng)格包括數(shù)字背景顯示風(fēng)格、顏色交替顯示風(fēng)格。
5.如權(quán)利要求3所述的密碼登錄組件，其特征在于，所有密碼存儲模塊的顯示風(fēng)格設(shè)置在一張圖片上。
6.如權(quán)利要求1所述的密碼登錄組件，其特征在于，所述每個密碼輸入框可輸入密碼字符的數(shù)目為一個。
7.如權(quán)利要求1所述的密碼登錄組件，其特征在于，所述密碼輸入框中輸入的字符居中顯示。
8.如權(quán)利要求2所述的密碼登錄組件，其特征在于，所述密碼存儲模塊不顯示滾動條。
【文檔編號】G06F21/31GK103777864SQ201410024152
【公開日】2014年5月7日 申請日期:2014年1月17日 優(yōu)先權(quán)日:2014年1月17日
【發(fā)明者】王偉東, 楊鎮(zhèn)瓊 申請人:廣東金宇恒科技有限公司