文字欄位小器具 (主題化)
文字欄位小器具是通常於表單內使用的輸入元素。您可以透過文字欄位使得使用者可在混搭中鍵入文字。您可以使用 Text 內容設定或擷取欄位內的文字。與文字區域小器具不同，文字欄位僅限於單行。除了通用小器具內容以外，您還可以透過內容使用下列方式配置小器具：
• 配置最大字元數並新增計數器。
• 使用文字作為資料服務、函數及其他小器具的輸入。
• 在未設定值的情況下顯示提示文字。
• 新增清除文字按鈕。
• 啟用唯讀模式。
• 隱藏敏感資訊輸入，例如密碼。
• 定義遮罩模式以確保輸入採用特定格式。
 |
「文字欄位」小器具可作為平台中的標準小器具使用，也可作為可從 SDL 匯入的 Web 元件 SDK 使用。
|
當小器具值在執行時間更新時，您可以使用下列小器具事件來執行資料服務或函數：
• EnterKeyPressed - 按下 ENTER 鍵時觸發。
• FocusLost - 當按一下小器具之外的區域或按下 TAB 鍵時觸發。
使用事件
文字欄位小器具會觸發兩個可繫結事件：
• Changed - 新增或移除字元時觸發。
• EnterKeyPressed - 當使用者按下 Enter 鍵時觸發。
您可以使用小器具事件觸發小器具內的函數、資料服務或服務。例如，您可以將事件繫結至驗證器函數，以在輸入或按下 Enter 鍵時驗證輸入。
啟用唯讀模式
您可以啟用 ReadOnly 內容以防止在執行時間變更文字。例如，您可以使用此內容來防止進行變更，除非已啟用切換按鈕或在混搭中選取核取方塊。當啟用唯讀時，您可以選取和複製文字，但不能編輯、剪下或刪除目前值。若要變更唯讀文字欄位的文字值，請在設計時輸入 Text 內容的值。您也可以將資料來源繫結至內容，以在執行時間變更文字值。
設定字元數限制
您可以使用下列方式之一將文字欄位中的輸入限制為特定字元數：
• 將 MaxNumberOfCharacters 內容設定為任何數值。依預設，文字欄位支援最多 100 個字元。
• 使用 Mask 內容定義遮罩模式。模式內的特殊字元數可用來設定字元限制。
將計數器新增至文字欄位
欲新增計數器以顯示文字欄位中的字元數，請將 Counter 內容設定為 True。MaxNumberOfCharacters 內容可用來設定字元限制，包括空格。下圖顯示了具有可見計數器且最大字元數為 10 的文字欄位小器具：
當達到字元限制時，計數器顏色會發生變更：
新增清除文字按鈕
您可以啟用 ShowClearText 內容來將文字按鈕新增至小器具的輸入方塊。當輸入欄位包含值時，此按鈕會自動顯示在小器具的右側。這可讓使用者快速移除小器具內的任何現有文字。
新增圖示
您可以使用 Icon 內容在文字欄位內顯示圖示。圖示會自動顯示在小器具的左側。您可以從在平台中提供的 SVG 圖示中選取圖示。如需有關這些圖示的詳細資訊，請參閱使用 SVG 圖示。
配置文字欄位輸入模式
您可以使用 Mask 內容將輸入模式指定為數字、字母以及字母數字字元。定義模式時，系統會將預留佔位符號導引新增至輸入方塊。導引是用於指示使用者可以在文字欄位中鍵入之文字模式的線。除必要模式以外，內容還會設定文字欄位中的字元數。您可以使用下列特殊字元建立模式：
• a - 字母
• 9 - 數字
• * - 字母數字
欲建立模式，請將特殊字元組合成字串以表示所需輸入。例如，下列模式代表不同類型的輸入：
• 9999 - 四位數字
• ***** - 五個字母數字字元
• 99–aa - 兩位數字，後跟分隔破折號和兩個字母字元。
下圖顯示了 999–999–999–999 數字模式的導引，該模式在執行時間將包含 4 個 3 位數字：
除了數字位數以外，模式還可用於設定數字的格式。在此範例中，您可以鍵入任意 12 位數字，例如：256120233234。當您鍵入時，底線 (_) 導引會由數字取代。
指示符號導引會根據您在設計時在模式中設定的字元總數進行顯示。當鍵入的位數少於模式設定的數位時，輸入內容會保持未完成狀態。應該使用遮罩來定義含有特定字元數的模式，例如電話號碼或郵遞區號。當輸入並非特定字元數 (例如貨幣金額) 時，請避免使用遮罩。
| | 您可以使用不同類型的符號，例如句點、破折號、斜線等作為字元之間的分隔符號。 |
| | 「文字欄位」小器具可作為平台中的標準小器具使用，也可作為可從 SDL 匯入的 web 元件使用。 |
「文字欄位」小器具的內容如下所列。
屬性名稱 | 描述 | 基礎類型 | 預設值 | 可繫結? (Y/N) | 可當地語系化? (Y/N) | ||
|---|---|---|---|---|---|---|---|
Text | 文字欄位中顯示的文字。 | STRING | n/a | Y | Y | ||
Label | 文字欄位標籤中顯示的文字。 | STRING | n/a | Y | Y | ||
Counter | 計算並顯示在文字欄位中輸入的字元數。 | BOOLEAN | False | N | N | ||
MaxNumberOfCharacters | 可讓您設定文字欄位中的最大字元數。 | NUMBER | 100 | Y | N | ||
HintText | 顯示預留位置文字，說明應在欄位中輸入的內容。 | STRING | n/a | N | Y | ||
Disabled | 使用此內容可禁用混搭中的小器具。小器具會顯示在混搭中，但您無法按一下。 | BOOLEAN | False | Y | N | ||
ReadOnly | 可讓您將文字欄位設定為唯讀，且使用者無法編輯文字。 | BOOLEAN | False | N | N | ||
Password | 可讓您隱藏文字欄位項目。 | BOOLEAN | False | N | N | ||
ShowClearText | 可讓您在文字欄位內新增「清除」按鈕，此按鈕可讓使用者於執行時間在按一下按鈕時清除欄位中的文字 | BOOLEAN | True | N | N | ||
LabelAlignment | 可讓您向左、向右或置中對齊標籤。 | STRING | 左 | N | N | ||
TextAlignment | 可讓您將文字對齊到欄位的左側或右側。 | STRING | 左 | N | N | ||
Mask | 可讓您在文字欄位中設定預先定義字元。在內容組態欄位中，使用 "a" 設定字母項目，使用 "9" 設定數字項目，使用 "*" 設定字母數字項目。 | STRING | n/a | N | N | ||
TabSequence | 使用者按下 Tab 鍵時小器具反白的順序。 | NUMBER | n/a | N | N | ||
CustomClass | 可讓您定義小器具頂部分區之 CSS。可輸入多個類別，之間以空格分隔。 | STRING | n/a | Y | N | ||
EnterKeyPressed | 在編輯文字值的情況下，按下 ENTER 鍵時觸發的事件。
| n/a | n/a | Y | N | ||
FocusLost | 在編輯文字值的情況下，使用者按下 TAB 鍵或按一下小器具之外的區域變更焦點時觸發的事件。
| n/a | n/a | Y | N | ||
Changed | 修改此小器具的資料時所觸發的事件。 | n/a | n/a | Y | N | ||
ResetToDefaultValue | 將此小器具的輸入重設為其預設值。 | n/a | n/a | Y | N | ||
Width | 小器具寬度。 | NUMBER | 273 | N | N | ||
Height | 小器具高度。預設會自動計算。如果您在文字欄位內包括標籤，高度會增加。 | NUMBER | 自動調整 | N | N | ||
TooltipField | 設定將游標置於小器具上時顯示的工具提示文字。 | STRING | n/a | Y | Y | ||
TooltipIcon | 為小器具的工具提示設定圖示圖像。 您可以新增圖像或指定圖像 URL 路徑。 | MEDIA ENTITY | n/a | N | N | ||
Icon | 指定要在文字方塊內顯示的圖示。 | SVG 圖示的清單 | n/a | N | N |
驗證小器具資料
除了通用內容以外，您還可以使用 MaxLength 與 MinLength 驗證內容來驗證「文字欄位」小器具中的字元數。
您可以使用 MaxLengthFailureMessage 與 MinLengthFailureMessage 內容自訂預設失敗訊息。使用 ${value} 參數，最大值與最小值會顯示在訊息中。
如需有關使用通用驗證內容的詳細資訊，請參閱將驗證套用至小器具。
下表列出了 ThingWorx 9.3.4 或更新版本中「驗證」面板上可用的驗證內容。
內容 | 描述 | 基礎類型 | 預設值 | 是否可繫結 (Y/N) | 可當地語系化 (Y/N) |
|---|---|---|---|---|---|
CriteriaMessage | 為驗證條件以及驗證失敗時顯示的訊息。 | STRING | n/a | Y | Y |
CriteriaMessageDetails | 為驗證條件和失敗訊息顯示的詳細資訊。 | STRING | n/a | Y | Y |
MaxLength | 文字欄位值的最大長度。 | STRING | n/a | Y | N |
MaxLengthFailureMessage | 目前值超過最大字元長度時顯示的訊息。 | STRING | ${value} characters is the maximum | Y | Y |
MinLength | 文字欄位值的最小長度。 | STRING | n/a | Y | N |
MinLengthFailureMessage | 目前值小於最小字元長度時顯示的訊息。 | STRING | ${value} characters is the minimum | Y | Y |
RequiredMessage | 當「必須填寫值」設定為 true 且未選取項目時顯示的訊息。 | STRING | 需要有值 | Y | Y |
ShowValidationCriteria | 編輯文字欄位時，顯示有關所需輸入的提示訊息。 | BOOLEAN | False | Y | N |
ShowValidationFailure | 當所輸入值未通過驗證時顯示失敗訊息。 | BOOLEAN | False | Y | N |
ShowValidationSuccess | 當所輸入值成功通過驗證時，顯示成功訊息。 | BOOLEAN | False | Y | N |
SuccessMessage | 驗證成功時顯示的訊息。 | STRING | n/a | Y | Y |
SuccessMessageDetails | 顯示有關驗證成功訊息之詳細資訊的次要訊息。 | STRING | n/a | Y | Y |
Validate | 小器具值變更時觸發的可繫結事件。將此事件繫結至服務或函數以套用驗證模式或運算式。 | 事件 | n/a | Y | N |
ValidationCriteriaIcon | 設定要在驗證條件的提示訊息中顯示的 SVG 圖示。 | IMAGELINK | info | N | N |
ValidationFailureIcon | 設定當驗證失敗時要在狀況訊息中顯示的 SVG 圖示。 | IMAGELINK | error | N | N |
ValidationOutput | 擷取小器具驗證的輸出。傳回的值為 Undefined、Unvalidated、Valid 或 Invalid。 | STRING | n/a | Y | N |
ValidationState | 這是設定驗證狀態的可繫結內容。您可以將此內容設定為 Undefined、Unvalidated、Valid 或 Invalid。 | STRING | Undefined | Y | N |
ValidationSuccessIcon | 選取當驗證成功時要在狀況訊息中顯示的 SVG 圖示。 | IMAGELINK | success | N | N |
ValueRequired | 需選取清單中某一項目。 | BOOLEAN | False | Y | N |