一種輸入狀態遷移處理方法及系統的製作方法
2023-05-10 06:59:01
一種輸入狀態遷移處理方法及系統的製作方法
【專利摘要】本發明提供了一種輸入狀態遷移處理方法，包括：頁面初始化完成後，對頁面節點進行遍歷，獲取具有輸入狀態遷移屬性的輸入框；對具有輸入狀態遷移屬性的輸入框進行統一處理；所述處理為：讀取超文本標記語言HTML文本中輸入框的輸入狀態遷移屬性的屬性值，將所述屬性值作為默認提示文本填充到輸入框，並將輸入框與焦點獲得事件和焦點失去事件綁定；本發明還提供一種輸入狀態遷移處理系統。根據本發明提供的技術方案，能夠提高輸入框的輸入狀態的處理效率。
【專利說明】一種輸入狀態遷移處理方法及系統
【【技術領域】】
[0001]本發明涉及網際網路應用領域，尤其涉及一種輸入狀態遷移處理方法及系統。
【【背景技術】】
[0002]目前，在註冊微博、註冊郵箱、商戶中心等各種表單的使用場景中，用戶需要通過瀏覽器顯不的表單向相應的伺服器提交各種信息，表單由一個或多個輸入框或輸入控制項組成；其中，有批量的信息需要採用輸入框的形式讓用戶輸入。在用戶未輸入信息之前，需要在輸入框中顯示默認提示文案，例如，用戶名輸入框的默認提示文案為「請輸入您的用戶名」，地址輸入框的默認提示文案為「請輸入您的地址」；當用戶點擊輸入框並開始輸入信息時，判斷輸入框中的信息是否為默認提示文案，如果是，則清空輸入框中的信息，如果不是，則保持輸入框中的信息不變；當用戶未輸入信息離開時，默認提示文案應當重新顯示在輸入框中；當用戶輸入了信息後離開時，輸入框應當保留用戶輸入的信息。而且輸入框中信息的文字樣式也隨著輸入狀態的變換而變換，默認提示文案的文字樣式與用戶輸入信息的文字樣式應當區別顯示，例如，當輸入框的信息為默認提示文案時，文字顏色需要顯示為灰色，當用戶在輸入框中輸入信息後，用戶輸入的信息的文字顏色顯示為黑色，以防用戶混淆。
[0003]目前對輸入狀態遷移的處理方法都是對每個輸入框的輸入狀態進行單獨檢測，根據檢測到的不同輸入狀態採取不同的處理方式，而且不同輸入狀態下文字需要使用不同的樣式；例如，單獨檢測方式中輸入框對象配置為:
[0004]〈input type=」 text」 id=」 userName，，/>
[0005]邏輯處理程序中的JavaScript代碼為:
[0006]if (userName的輸入框的當前輸入值==」請輸入您的用戶名」){
[0007]userName的輸入框的當前輸入值置為空值；
[0008]}
[0009]當存在大量輸入框時，利用現有的單獨檢測方式，就需要針對每個輸入框都開發一套上述邏輯處理程序，從而導致開發效率較低，耗費較多的人力物力，開發成本較高；而且邏輯處理程序的代碼量較大，導致輸入狀態的檢測和處理效率較低；此外，每個輸入框的變量都固定在該邏輯處理程序中，不便於對輸入框的變量進行修改和擴展。
【
【發明內容】
】
[0010]本發明提供了一種輸入狀態遷移處理方法及系統，能夠提高輸入框的輸入狀態的處理效率。
[0011]本發明的具體技術方案如下:
[0012]根據本發明一優選實施例，一種輸入狀態遷移處理方法，包括:
[0013]頁面初始化完成後，對頁面節點進行遍歷，獲取具有輸入狀態遷移屬性的輸入框；
[0014]對具有輸入狀態遷移屬性的輸入框進行統一處理；所述處理為:讀取超文本標記語言HTML文本中輸入框的輸入狀態遷移屬性的屬性值，將所述屬性值作為默認提示文本填充到輸入框，並將輸入框與焦點獲得事件和焦點失去事件綁定。
[0015]上述方法中，所述輸入狀態遷移屬性預先被添加到HTML文本，作為所述HTML文本中輸入框的屬性。
[0016]上述方法中，所述輸入狀態遷移屬性包括輸入框的默認顯示文本屬性和輸入框的默認顯示文本樣式屬性。
[0017]上述方法中，所述輸入框的默認顯示文本屬性的屬性值為輸入框的默認顯示文本；
[0018]所述輸入框的默認顯示文本樣式屬性的屬性值表示所述默認顯示文本的字體樣式。
[0019]上述方法中，獲取具有輸入狀態遷移屬性的輸入框的方法為:
[0020]依據預設的輸入狀態遷移屬性的屬性名，從HTML文本中獲取有輸入狀態遷移屬性的輸入框，並將獲取到的具有輸入狀態遷移屬性的輸入框保存到數組。
[0021]上述方法中，所述讀取HTML文本中輸入框的輸入狀態遷移屬性的屬性值，將所述屬性值作為默認提示文本填充到輸入框具體為:
[0022]依據輸入框ID在HTML文本中獲得對應的輸入框的輸入狀態遷移屬性；
[0023]讀取輸入狀態遷移屬性中默認顯示文本屬性的屬性值，將所述屬性值作為該輸入框的默認顯示文本填充到該輸入框中；
[0024]讀取輸入狀態遷移屬性中輸入框的默認顯示文本樣式屬性的屬性值，依據所述屬性值對應的級聯樣式表CSS樣式設置輸入框中默認顯示文本的字體樣式。
[0025]上述方法中，所述將輸入框與焦點獲得事件和焦點失去事件綁定具體為:
[0026]依據輸入框ID獲得輸入框對象，為所述輸入框對象添加焦點獲得事件函數和焦點失去事件函數；所述焦點獲得事件函數包括觸發焦點獲得事件的動作和觸發焦點獲得事件後執行的操作，所述焦點失去事件函數包括觸發焦點失去事件的動作和觸發焦點失去事件後執行的操作。
[0027]上述方法中，所述觸發焦點獲得事件後執行的操作為:判斷輸入框中的文本是否為默認顯示文本，如果是，清空輸入框中的文本，如果不是，不進行任何處理；
[0028]所述觸發焦點失去事件後執行的操作為:判斷輸入框中的默認顯示文本是否為空，如果為空，讀取HTML文本中所述輸入框的默認顯示文本屬性的屬性值，將所述屬性值作為默認顯示文本填充到輸入框中，並讀取輸入狀態遷移屬性中輸入框的默認顯示文本樣式屬性的屬性值，依據所述屬性值對應的CSS樣式設置輸入框中默認顯示文本的字體樣式；如果不為空，不進行任何處理。
[0029]一種輸入狀態遷移處理系統，包括:遍歷單元、輸入狀態處理單元；其中，
[0030]遍歷單元，用於在頁面初始化完成後，對頁面節點進行遍歷，獲取具有輸入狀態遷移屬性的輸入框；
[0031]輸出狀態處理單元，用於對具有輸入狀態遷移屬性的輸入框進行統一處理；所述處理為:讀取超文本標記語言HTML文本中輸入框的輸入狀態遷移屬性的屬性值，將所述屬性值作為默認提示文本填充到輸入框，並將輸入框與焦點獲得事件和焦點失去事件綁定。
[0032]上述系統中，所述輸入狀態遷移屬性預先被添加到HTML文本，作為所述HTML文本中輸入框的屬性。
[0033]上述系統中，所述輸入狀態遷移屬性包括輸入框的默認顯示文本屬性和輸入框的默認顯示文本樣式屬性。
[0034]上述系統中，所述輸入框的默認顯示文本屬性的屬性值為輸入框的默認顯示文本；
[0035]所述輸入框的默認顯示文本樣式屬性的屬性值表示所述默認顯示文本的字體樣式。
[0036]上述系統中，遍歷單元在獲取具有輸入狀態遷移屬性的輸入框時，具體用於:
[0037]依據預設的輸入狀態遷移屬性的屬性名，從HTML文本中獲取有輸入狀態遷移屬性的輸入框，並將獲取到的具有輸入狀態遷移屬性的輸入框保存到數組。
[0038]上述系統中，所述輸入狀態處理單元在讀取HTML文本中輸入框的輸入狀態遷移屬性的屬性值，將所述屬性值作為默認提示文本填充到輸入框時，具體用於:
[0039]依據輸入框ID在HTML文本中獲得對應的輸入框的輸入狀態遷移屬性；
[0040]讀取輸入狀態遷移屬性中默認顯示文本屬性的屬性值，將所述屬性值作為該輸入框的默認顯示文本填充到該輸入框中；
[0041]讀取輸入狀態遷移屬性中輸入框的默認顯示文本樣式屬性的屬性值，依據所述屬性值對應的級聯樣式表CSS樣式設置輸入框中默認顯示文本的字體樣式。
[0042]上述系統中，所述輸入狀態處理單元在將輸入框與焦點獲得事件和焦點失去事件綁定時，具體用於:
[0043]依據輸入框ID獲得輸入框對象，為所述輸入框對象添加焦點獲得事件函數和焦點失去事件函數；所述焦點獲得事件函數包括觸發焦點獲得事件的動作和觸發焦點獲得事件後執行的操作，所述焦點失去事件函數包括觸發焦點失去事件的動作和觸發焦點失去事件後執行的操作。
[0044]上述系統中，所述觸發焦點獲得事件後執行的操作為:判斷輸入框中的文本是否為默認顯示文本，如果是，清空輸入框中的文本，如果不是，不進行任何處理；
[0045]所述觸發焦點失去事件後執行的操作為:判斷輸入框中的默認顯示文本是否為空，如果為空，讀取HTML文本中所述輸入框的默認顯示文本屬性的屬性值，將所述屬性值作為默認顯示文本填充到輸入框中，並讀取輸入狀態遷移屬性中輸入框的默認顯示文本樣式屬性的屬性值，依據所述屬性值對應的CSS樣式設置輸入框中默認顯示文本的字體樣式；如果不為空，不進行任何處理。
[0046]由以上技術方案可以看出，本發明提供的具有以下有益效果:
[0047]本發明的技術方案能夠提高頁面中輸入框的開發效率，降低人力成本和物力成本；處理邏輯需要的屬性值只需要在HTML文本中獲取即可，方便對輸入框的變量進行修改和擴展；能夠大大減少邏輯處理程序的代碼量，提高了代碼的運行效率，實現批量高效的處理。
【【專利附圖】
【附圖說明】】
[0048]圖1是本發明實現輸入狀態遷移處理方法的優選實施例的流程示意圖；
[0049]圖2是本發明實現輸入狀態遷移處理系統的優選實施例的結構示意圖。
【【具體實施方式】】
[0050]本發明的基本思想是:頁面初始化完成後，對頁面節點進行遍歷，獲取具有輸入狀態遷移屬性的輸入框；對具有輸入狀態遷移屬性的輸入框進行統一處理；所述處理為:讀取超文本標記語言HTML文本中輸入框的輸入狀態遷移屬性的屬性值，將所述屬性值作為默認提示文本填充到輸入框，並將輸入框與焦點獲得事件和焦點失去事件綁定。
[0051]為了使本發明的目的、技術方案和優點更加清楚，下面結合附圖和具體實施例對本發明進行詳細描述。
[0052]本發明提供一種輸入狀態遷移處理方法，圖1是本發明實現輸入狀態遷移處理方法的優選實施例的流程示意圖，如圖1所示，該優選實施例包括以下步驟:
[0053]步驟101，在保存輸入框對象的HTML文本中為輸入框添加輸入狀態遷移屬性。
[0054]具體的，利用配置信息設置輸入狀態遷移所需要的屬性，配置信息指的是配置在超文本標記語言(HTML, Hypertext Markup Language)文本中的信息，HTML文本中為輸入框對象，利用HTML文本中輸入框對象可以在頁面加載輸入框，本優選實施例中，在配置信息中配置輸入狀態遷移屬性，因此，配置的輸入狀態遷移屬性就作為輸入框的屬性存在，從而實現在輸入框的屬性中添加輸入狀態遷移屬性，利用該方式為每個需要輸入狀態遷移機制的輸入框都添加輸入狀態遷移屬性；所述輸入狀態遷移屬性包括輸入框的默認顯示文本屬性和輸入框的默認顯示文本樣式屬性；所述輸入狀態遷移屬性將在JavaScript代碼中使用，在HTML文本中配置該輸入狀態遷移屬性可以方便JavaScript代碼調用。
[0055]例如，對於用戶名輸入框，沒有添加輸入狀態遷移屬性的輸入框為:
[0056]〈input id=」 userName」 type=」 text，，/>
[0057]添加輸入狀態遷移屬性的輸入框為:
[0058]〈input id=」 userName」 type=」 text」 defaultValue=」 請輸入您的用戶名，，defaultStyle=，，gracyText/>
[0059]其中，defaultValue為輸入框的默認顯示文本屬性的屬性名，請輸入您的用戶名為輸入框的默認顯示文本屬性的屬性值，表示用戶名輸入框中的默認顯示文本為請輸入您的用戶名；defaultStyle為輸入框的默認顯示文本樣式屬性的屬性名，gracyText為輸入框的默認顯示文本樣式屬性的屬性值，表示用戶名輸入框中默認顯示文本的字體顏色為gracyText,該gracyText在CSS樣式中表示灰色；當輸入框中的默認顯示文本為請輸入您的用戶名時，該默認顯示文本的字體顏色為灰色；這裡，defaultValue屬性和defaultStyle屬性都是配置在ID為userName的輸入框上的屬性；本優選實施例中，利用HTML文本來實現輸入框的輸入狀態遷移屬性的配置，可以非常方便的修改輸入狀態遷移屬性(如defaultValue)的屬性值。
[0060]級聯樣式表(CSS,Cascading Style Sheet)又稱為風格樣式表(SS, StyleSheet)，用於進行網頁風格設計，例如，連結字在未點擊時是藍色，當滑鼠移動到連結字上之後變成紅色且有下劃線，這就是一種風格；CSS代碼存儲在CSS文件中，CSS文件中定義了很多CSS樣式名，在HTML文本中通過頁面元素的class屬性來關聯CSS樣式，例如，HTML文本中有輸入框:〈input type=」text」class=」blueText」/>,這樣輸入框就通過class屬性關聯了樣式名為blueText的樣式,通過在CSS文件中定義樣式名為blueText的樣式,就可以控制輸入框呈現出CSS所定義的樣式。
[0061]例如:有如下CSS代碼:
[0062]
【權利要求】
1.一種輸入狀態遷移處理方法，其特徵在於，該方法包括: 頁面初始化完成後，對頁面節點進行遍歷，獲取具有輸入狀態遷移屬性的輸入框； 對具有輸入狀態遷移屬性的輸入框進行統一處理；所述處理為:讀取超文本標記語言HTML文本中輸入框的輸入狀態遷移屬性的屬性值，將所述屬性值作為默認提示文本填充到輸入框，並將輸入框與焦點獲得事件和焦點失去事件綁定。
2.根據權利要求1所述的方法，其特徵在於，所述輸入狀態遷移屬性預先被添加到HTML文本，作為所述HTML文本中輸入框的屬性。
3.根據權利要求1所述的方法，其特徵在於，所述輸入狀態遷移屬性包括輸入框的默認顯示文本屬性和輸入框的默認顯示文本樣式屬性。
4.根據權利要求3所述的方法，其特徵在於， 所述輸入框的默認顯示文本屬性的屬性值為輸入框的默認顯示文本； 所述輸入框的默認顯示文本樣式屬性的屬性值表示所述默認顯示文本的字體樣式。
5.根據權利要求1所述的方法，其特徵在於，獲取具有輸入狀態遷移屬性的輸入框的方法為: 依據預設的輸入狀態遷移屬性的屬性名，從HTML文本中獲取有輸入狀態遷移屬性的輸入框，並將獲取到的具有輸入狀態遷移屬性的輸入框保存到數組。
6.根據權利要求1所述的方法，其特徵在於，所述讀取HTML文本中輸入框的輸入狀態遷移屬性的屬性值，將所述屬性值作為默認提示文本填充到輸入框具體為: 依據輸入框ID在HTML文本中獲得對應的輸入框的輸入狀態遷移屬性； 讀取輸入狀態遷移屬性中默認顯示文本屬性的屬性值，將所述屬性值作為該輸入框的默認顯示文本填充到該輸入框中； 讀取輸入狀態遷移屬性中輸入框的默認顯示文本樣式屬性的屬性值，依據所述屬性值對應的級聯樣式表CSS樣式設置輸入框中默認顯示文本的字體樣式。
7.根據權利要求1所述的方法，其特徵在於，所述將輸入框與焦點獲得事件和焦點失去事件綁定具體為: 依據輸入框ID獲得輸入框對象，為所述輸入框對象添加焦點獲得事件函數和焦點失去事件函數；所述焦點獲得事件函數包括觸發焦點獲得事件的動作和觸發焦點獲得事件後執行的操作，所述焦點失去事件函數包括觸發焦點失去事件的動作和觸發焦點失去事件後執行的操作。
8.根據權利要求7所述的方法，其特徵在於， 所述觸發焦點獲得事件後執行的操作為:判斷輸入框中的文本是否為默認顯示文本，如果是，清空輸入框中的文本，如果不是，不進行任何處理； 所述觸發焦點失去事件後執行的操作為:判斷輸入框中的默認顯示文本是否為空，如果為空，讀取HTML文本中所述輸入框的默認顯示文本屬性的屬性值，將所述屬性值作為默認顯示文本填充到輸入框中，並讀取輸入狀態遷移屬性中輸入框的默認顯示文本樣式屬性的屬性值，依據所述屬性值對應的CSS樣式設置輸入框中默認顯示文本的字體樣式；如果不為空，不進行任何處理。
9.一種輸入狀態遷移處理系統，其特徵在於，該系統包括:遍歷單元、輸入狀態處理單元；其中，遍歷單元，用於在頁面初始化完成後，對頁面節點進行遍歷，獲取具有輸入狀態遷移屬性的輸入框； 輸出狀態處理單元，用於對具有輸入狀態遷移屬性的輸入框進行統一處理；所述處理為:讀取超文本標記語言HTML文本中輸入框的輸入狀態遷移屬性的屬性值，將所述屬性值作為默認提示文本填充到輸入框，並將輸入框與焦點獲得事件和焦點失去事件綁定。
10.根據權利要求9所述的系統，其特徵在於，所述輸入狀態遷移屬性預先被添加到HTML文本，作為所述HTML文本中輸入框的屬性。
11.根據權利要求9所述的系統，其特徵在於，所述輸入狀態遷移屬性包括輸入框的默認顯示文本屬性和輸入框的默認顯示文本樣式屬性。
12.根據權利要求11所述的系統，其特徵在於， 所述輸入框的默認顯示文本屬性的屬性值為輸入框的默認顯示文本； 所述輸入框的默認顯示文本樣式屬性的屬性值表示所述默認顯示文本的字體樣式。
13.根據權利要求9所述的系統，其特徵在於，遍歷單元在獲取具有輸入狀態遷移屬性的輸入框時，具體用於: 依據預設的輸入狀態遷移屬性的屬性名，從HTML文本中獲取有輸入狀態遷移屬性的輸入框，並將獲取到的具有輸入狀態遷移屬性的輸入框保存到數組。
14.根據權利要求9所述的系統，其特徵在於，所述輸入狀態處理單元在讀取HTML文本中輸入框的輸入狀態遷移屬性的屬性值，將所述屬性值作為默認提示文本填充到輸入框時，具體用於: 依據輸入框ID在HTML文本中獲得對應的輸入框的輸入狀態遷移屬性； 讀取輸入狀態遷移屬性中默認顯示文本屬性的屬性值，將所述屬性值作為該輸入框的默認顯示文本填充到該輸入框中； 讀取輸入狀態遷移屬性中輸入框的默認顯示文本樣式屬性的屬性值，依據所述屬性值對應的級聯樣式表CSS樣式設置輸入框中默認顯示文本的字體樣式。
15.根據權利要求9所述的系統，其特徵在於，所述輸入狀態處理單元在將輸入框與焦點獲得事件和焦點失去事件綁定時，具體用於: 依據輸入框ID獲得輸入框對象，為所述輸入框對象添加焦點獲得事件函數和焦點失去事件函數；所述焦點獲得事件函數包括觸發焦點獲得事件的動作和觸發焦點獲得事件後執行的操作，所述焦點失去事件函數包括觸發焦點失去事件的動作和觸發焦點失去事件後執行的操作。
16.根據權利要求15所述的系統，其特徵在於， 所述觸發焦點獲得事件後執行的操作為:判斷輸入框中的文本是否為默認顯示文本，如果是，清空輸入框中的文本，如果不是，不進行任何處理； 所述觸發焦點失去事件後執行的操作為:判斷輸入框中的默認顯示文本是否為空，如果為空，讀取HTML文本中所述輸入框的默認顯示文本屬性的屬性值，將所述屬性值作為默認顯示文本填充到輸入框中，並讀取輸入狀態遷移屬性中輸入框的默認顯示文本樣式屬性的屬性值，依據所述屬性值對應的CSS樣式設置輸入框中默認顯示文本的字體樣式；如果不為空，不進行任何處理。
【文檔編號】G06F9/44GK104049956SQ201310078543
【公開日】2014年9月17日 申請日期:2013年3月12日 優先權日:2013年3月12日
【發明者】雷凱華, 白旭 申請人:百度在線網絡技術（北京）有限公司