Forms (適用性表單和HTML5表單)使用 jQuery, Backbone.js 和 底線.js 用於外觀和指令碼的程式庫。 這些表單也使用 jQuery UI Widget 表單中所有互動式元素(例如欄位和按鈕)的架構。 此架構可讓Form開發人員在Forms中使用一組豐富的可用jQuery Widget和外掛程式。 您也可以從使用者擷取資料(例如leadDigits/trailDigits限制或實作圖片子句)時實作表單特定邏輯。 表單開發人員可以建立和使用自訂外觀,以改善資料擷取體驗,並使其更人性化。
本文內容適用於對jQuery和jQuery Widget有足夠瞭解的開發人員。 它提供外觀架構的深入分析,並可讓開發人員為表單欄位建立替代外觀。
外觀架構仰賴各種選項、事件(觸發器)和函式來擷取使用者與表單的互動,並回應模型變更以通知一般使用者。 此外:
以下是設定的全域選項。 這些選項適用於每個欄位。
屬性 | 說明 |
---|---|
名稱 | 用於在指令碼運算式中指定此物件或事件的識別碼。 例如,此屬性會指定主機應用程式的名稱。 |
值 | 欄位的實際值。 |
displayvalue | 此時會顯示欄位的這個值。 |
screenreaderText | 熒幕Reader使用此值來提供欄位相關資訊的旁白。 表單會提供值,您可以覆寫值。 |
tabIndex | 欄位在表單索引標籤序列中的位置。 只有在您想要變更表單的預設tab鍵順序時,才覆寫tabIndex。 |
角色 | 元素的角色,例如,標題或表格。 |
高度 | Widget的高度。 以畫素為單位指定。 |
寬度 | Widget的寬度。 以畫素為單位指定。 |
存取 | 用來存取容器物件(例如子表單)內容的控制項。 |
paraStyles | Widget之XFA元素的para屬性。 |
目錄 | 文字的方向。 可能的值為ltr (由左至右)和rtl (由右至左)。 |
除了這些選項,框架還提供其他選項,這些選項會因欄位型別而異。 以下列出欄位特定選項的詳細資料。
為了與表單架構互動,Widget會觸發一些事件,讓表單指令碼運作。 如果Widget未擲回這些事件,則在該欄位表單中撰寫的某些指令碼將無法運作。
Event | 說明 |
---|---|
XFA_ENTER_EVENT | 每當欄位成為焦點時,就會觸發此事件。 它可讓「enter」指令碼在欄位上執行。 觸發事件的語法為 (Widget)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_ENTER_EVENT) |
XFA_EXIT_EVENT | 只要使用者離開欄位,就會觸發此事件。 它可讓引擎設定欄位的值並執行其「退出」指令碼。 觸發事件的語法為 (Widget)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_EXIT_EVENT) |
XFA_CHANGE_EVENT | 此事件會觸發,以允許引擎執行在欄位上寫入的「變更」指令碼。 觸發事件的語法為 (Widget)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_EVENT) |
XFA_CLICK_EVENT | 只要按一下欄位,就會觸發此事件。 它可讓引擎執行在欄位上寫入的「click」指令碼。 觸發事件的語法為 (Widget)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENT) |
外觀架構會呼叫在自訂Widget中實作的Widget的某些函式。 Widget必須實作下列函式:
函數 | 說明 |
---|---|
聚焦:function() | 將焦點放在欄位。 |
click: function() | 將焦點放在欄位上並呼叫XFA_CLICK_EVENT。 |
markError:function(errorMessage, errorType) 注意:僅適用於HTML5表單。 |
傳送錯誤訊息和錯誤型別至Widget。 Widget會顯示錯誤。 |
clearError: function() 注意:僅適用於HTML5表單。 |
如果欄位中的錯誤已修正,則呼叫。 Widget會隱藏錯誤。 |
所有自訂Widget都應符合上述規格。 若要使用不同欄位的功能,Widget必須符合該特定欄位的准則。
選項 | 說明 |
---|---|
多行 | 如果欄位支援輸入新行字元,則為True,否則為false。 |
maxChars | 可在欄位中輸入的最大字元數。 |
limitLengthToVisibleArea 注意:僅適用於HTML5表單 |
指定文字寬度超過Widget寬度時文字欄位的行為。 |
選項 | 說明 |
---|---|
值 |
選取值的陣列。 |
項目 |
要顯示為選項的物件陣列。 每個物件包含兩個屬性 — 儲存:值儲存,顯示:值顯示。 |
可編輯 注意:僅適用於HTML5表單。 |
如果值為true,則會在Widget中啟用自訂文字輸入。 |
displayvalue |
要顯示的值陣列。 |
多選 |
如果允許多重選取,則為True,否則為false。 |
函數 | 說明 |
---|---|
addItem: function(itemValues) |
將專案新增至清單。 |
deleteItem:函式(nIndex) nIndex:要從清單中移除之專案的索引 |
從清單中刪除選項。 |
clearItems: function() |
清除清單中的所有選項。 |
選項 | 說明 |
---|---|
資料型別 | 代表欄位資料型別(整數/小數)的字串。 |
leadDigits | 十進位數字中允許的前置位數上限。 |
fracDigits | 十進位數字中允許的分數位數上限。 |
零 | 欄位地區設定中零的字串表示。 |
小數 | 欄位地區設定中十進位的字串表示。 |
選項 | 說明 |
---|---|
values | 值的陣列(開啟/關閉/中性)。 它是checkButton不同狀態的值陣列。 values[0]是狀態為開啟時的值,values[1]是狀態為關閉時的值, |
狀態 | 允許的狀態數。 兩個用於調適型表單(開、關),三個用於HTML5表單(開、關、中性)。 |
狀態 | 元素的目前狀態。 兩個用於調適型表單(開、關),三個用於HTML5表單(開、關、中性)。 |
選項 | 說明 |
---|---|
天 | 該欄位的本地化天數名稱。 |
個月 | 該欄位的當地語系化月份名稱。 |
零 | 數字0本地化文字。 |
cleartext | 清除按鈕的本地化文字。 |