應(yīng)用于瀏覽器的文本輸入框顯示方法和裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明屬于計(jì)算機(jī)技術(shù)領(lǐng)域，尤其涉及一種應(yīng)用于瀏覽器的文本輸入框顯示方法和裝置。
【背景技術(shù)】
[0002]html5為input元素新增了一個(gè)屬性“placeholder”,提供對(duì)輸入字段預(yù)期值的提示信息。如圖1所示，當(dāng)input為空且未獲得焦點(diǎn)時(shí),所述提示信息顯示。如圖2所示，當(dāng)input獲得焦點(diǎn)時(shí),所述提示信息消失。
[0003]雖然，目前大部分瀏覽器都對(duì)placeholder屬性提供了支持，但如IE6?IE9等瀏覽器卻不支持placeholder屬性,在這些不支持原生placeholder屬性的瀏覽器下,通常使用value值來模擬placeholder屬性。S卩，如果input為空且未獲得焦點(diǎn)，就把value值設(shè)置為placeholder屬性的值,一旦獲得焦點(diǎn)，則將該input的值清空。這種方式在一些情況下會(huì)有問題，比如type =“password”的input的value值是以星號(hào)顯示的,無法直接顯示文字，除非同時(shí)更改type類型。再如,會(huì)給表單驗(yàn)證帶來麻煩,如果某input是必填的,那么提交表單的時(shí)候該input的value為空或者為placeholder值時(shí)都不應(yīng)該被提交,所以我們要增加對(duì)value為placeholder的判斷,不過如果項(xiàng)目里使用了驗(yàn)證插件，而插件本身又不支持這種方式，還是會(huì)帶來些麻煩的。

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

[0004]本發(fā)明的目的在于提供一種應(yīng)用于瀏覽器的文本輸入框顯示方法和裝置，旨在解決現(xiàn)有技術(shù)中的上述技術(shù)問題。
[0005]為解決上述技術(shù)問題，本發(fā)明實(shí)施例提供以下技術(shù)方案:
[0006]一種應(yīng)用于瀏覽器的數(shù)據(jù)處理方法，所述瀏覽器包括用于輸入文本的輸入框，所述方法包括以下步驟:
[0007]創(chuàng)建標(biāo)簽，其中，所述標(biāo)簽覆蓋于所述輸入框上，且所述標(biāo)簽的文本內(nèi)容為對(duì)所述輸入框需輸入字段預(yù)期值的提示信息；
[0008]判斷當(dāng)前瀏覽器是否支持占位符placeholder屬性；
[0009]若當(dāng)前瀏覽器不支持placeholder屬性,則監(jiān)聽所述輸入框的輸入input事件；
[0010]若監(jiān)聽到所述輸入框的input事件，則判斷所述輸入框的值是否為空；
[0011]如果輸入框的值為空，則顯示所述標(biāo)簽；
[0012]如果輸入框的值不為空，則隱藏所述標(biāo)簽。
[0013]一種應(yīng)用于瀏覽器的數(shù)據(jù)處理裝置，所述瀏覽器包括用于輸入文本的輸入框，所述裝置包括:
[0014]創(chuàng)建單元，用于創(chuàng)建標(biāo)簽，其中，所述標(biāo)簽覆蓋于所述輸入框上，且所述標(biāo)簽的文本內(nèi)容為對(duì)所述輸入框需輸入字段預(yù)期值的提示信息；
[0015]第一判斷單元，用于判斷當(dāng)前瀏覽器是否支持占位符placeholder屬性；
[0016]監(jiān)聽單元，用于若當(dāng)前瀏覽器不支持placeholder屬性，則監(jiān)聽所述輸入框的輸入input事件；
[0017]第二判斷單元，用于若監(jiān)聽到所述輸入框的input事件，則判斷所述輸入框的值是否為空;
[0018]顯示單元，用于如果輸入框的值為空，則顯示所述標(biāo)簽；
[0019]隱藏單元，用于如果輸入框的值不為空，則隱藏所述標(biāo)簽。
[0020]本發(fā)明實(shí)施例提供的應(yīng)用于瀏覽器的文本輸入框顯示方法，提供了一種插入一個(gè)覆蓋在input上的標(biāo)簽(label標(biāo)簽)來模擬placeholder的方式,相比較現(xiàn)有利用輸入框的value值來模擬placeholder提示信息的方法,本實(shí)施例的方法可避免在提交表單的時(shí)候?qū)laceholder的屬性值當(dāng)做輸入框的value值來提交，從而實(shí)現(xiàn)了在不影響輸入框?qū)嶋H功能的情況下模擬了 placeholder屬性。
【附圖說明】
[0021]圖1是本發(fā)明現(xiàn)有的應(yīng)用于瀏覽器的文本輸入框示意圖；
[0022]圖2是本發(fā)明第一實(shí)施例中應(yīng)用于瀏覽器的文本輸入框顯示方法的流程示意圖；
[0023]圖3為本發(fā)明第二實(shí)施例中應(yīng)用于瀏覽器的文本輸入框顯示方法的流程示意圖；
[0024]圖4是本發(fā)明第三實(shí)施例中應(yīng)用于瀏覽器的文本輸入框顯示裝置的流程示意圖；
[0025]圖5是本發(fā)明第四實(shí)施例中應(yīng)用于瀏覽器的文本輸入框顯示裝置的結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0026]請(qǐng)參照?qǐng)D式，其中相同的組件符號(hào)代表相同的組件，本發(fā)明的原理是以實(shí)施在一適當(dāng)?shù)倪\(yùn)算環(huán)境中來舉例說明。以下的說明是基于所例示的本發(fā)明具體實(shí)施例，其不應(yīng)被視為限制本發(fā)明未在此詳述的其它具體實(shí)施例。
[0027]在以下的說明中，本發(fā)明的具體實(shí)施例將參考由一部或多部計(jì)算機(jī)所執(zhí)行之作業(yè)的步驟及符號(hào)來說明，除非另有述明。因此，其將可了解到這些步驟及操作，其中有數(shù)次提到為由計(jì)算機(jī)執(zhí)行，包括了由代表了以一結(jié)構(gòu)化型式中的數(shù)據(jù)之電子信號(hào)的計(jì)算機(jī)處理單元所操縱。此操縱轉(zhuǎn)換該數(shù)據(jù)或?qū)⑵渚S持在該計(jì)算機(jī)之內(nèi)存系統(tǒng)中的位置處，其可重新配置或另外以本領(lǐng)域技術(shù)人員所熟知的方式來改變?cè)撚?jì)算機(jī)之運(yùn)作。該數(shù)據(jù)所維持的數(shù)據(jù)結(jié)構(gòu)為該內(nèi)存之實(shí)體位置，其具有由該數(shù)據(jù)格式所定義的特定特性。但是，本發(fā)明原理以上述文字來說明，其并不代表為一種限制，本領(lǐng)域技術(shù)人員將可了解到以下所述的多種步驟及操作亦可實(shí)施在硬件當(dāng)中。
[0028]本發(fā)明的原理使用許多其它泛用性或特定目的運(yùn)算、通信環(huán)境或組態(tài)來進(jìn)行作業(yè)。所熟知適合用于本發(fā)明的運(yùn)算系統(tǒng)、環(huán)境與組態(tài)的范例可包括(但不限于)行動(dòng)電話、個(gè)人計(jì)算機(jī)、服務(wù)器、多處理器系統(tǒng)、微電腦為主的系統(tǒng)、主架構(gòu)型計(jì)算機(jī)、及分布式運(yùn)算環(huán)境，其中包括了任何的上述系統(tǒng)或裝置。
[0029]如在此處使用的術(shù)語「模塊」或「單元」可稱之為在該運(yùn)算系統(tǒng)上執(zhí)行的軟件對(duì)象或例式。在此處所述之不同組件、模塊、引擎及服務(wù)可實(shí)施為在該運(yùn)算系統(tǒng)上執(zhí)行之對(duì)象或處理。而在此處所述的系統(tǒng)及方法優(yōu)選地是實(shí)施成軟件，在軟件及硬件或硬件上之實(shí)施亦有可能并進(jìn)行考慮。
[0030]請(qǐng)參閱圖2，圖2為本發(fā)明第一實(shí)施例中應(yīng)用于瀏覽器的文本輸入框顯示方法的流程示意圖，其中所述瀏覽器包括用于輸入文本的輸入框。
[0031]所述應(yīng)用于瀏覽器的文本輸入框顯示方法包括以下步驟:
[0032]步驟SI 10，創(chuàng)建標(biāo)簽(即label標(biāo)簽)，其中，所述標(biāo)簽覆蓋于所述輸入框上，且所述標(biāo)簽的文本內(nèi)容為對(duì)所述輸入框需輸入字段預(yù)期值的提示信息。
[0033]具體的，標(biāo)簽為input元素定義標(biāo)注(標(biāo)記)，label元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果用戶在label元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
[0034]其中，所述輸入字段預(yù)期值的提示信息可以為“請(qǐng)輸入手機(jī)號(hào)”、“請(qǐng)輸入QQ號(hào)”及“支持QQ號(hào)/油箱/手機(jī)號(hào)登錄”等用于提示用戶在所述輸入框輸入正確文本的提示語。
[0035]步驟S120,判斷當(dāng)前瀏覽器是否支持占位符placeholder屬性。
[0036]步驟S130,若當(dāng)前瀏覽器不支持placeholder屬性，則監(jiān)聽所述輸入框的輸入input事件。
[0037]步驟S140，若監(jiān)聽到所述輸入框的input事件，則判斷所述輸入框的值是否為空。
[0038]步驟S150，如果輸入框的值為空，則顯示所述標(biāo)簽。
[0039]步驟S160，如果輸入框的值不為空，則隱藏所述標(biāo)簽。
[0040]上述用于瀏覽器的文本輸入框顯示方法，提供了一種插入一個(gè)覆蓋在input上的la