dijit/form/NumberTextBox

簡介

數值文字框的模組是 dijit/form/NumberTextBox ，用來輸入數值，同時對數值做檢核。

數值文字框為檢核文字框 (dijit/form/ValidationTextBox) 的子類別 (subclass)，因此繼承了檢核文字框的所有屬性。實際上，有些屬性在檢核文字框的類別中就已經存在了；只不過在輸入數值時，也就是使用數值文字框時，才真正派上用場；像 constrains 這個屬性就是如此，其中的大部份的限制條件及格式都是針對數值使用的。

範例

數值超出允許允範圍的錯誤訊息：

CSS

<style>
input, textarea {
    font-family:monospace;
}
</style>

上列的 CSS 碼將輸入欄位的字型改成定寬 (Fixed-Width) 字型，這樣欄位的寬度比較好計算。

HTML

<body class="claro">
  旋轉角度(0.0 - 360.0)：
  
</body>

type 屬性在數值文字框時，設定成 type="text" 或 type="number" 都可以，因為在經過 dojo 的「整容」後，最終 HTML 碼的設定都是 type="text"。

當套用 dojo 的外觀時， HTML 中的 size 屬性不起作用，一定得用 style 去設定欄位寬度，實驗結果大約是：（字母數 * 0.7em ）。如果修改了 font-size 屬性，得再做實驗了。

constrains 用來定義對數入數值的限制，中的 min 和 max 屬性，望文生義，就知道是設定輸入數值的最小允許值和最大允許值，允許值的範圍含括 min 及 max 的設定值。

places 指定輸入數值時，數值中必須包含幾位小數。如果不設，就不會針對輸入的數值做小數位個數的檢核。如果在輸入框中輸入數值時，因為小數位的值是 0 而沒有輸入小數位，一樣會造成格式錯誤，並顯示格式錯誤的訊息。

pattern 說明當數值輸入後，重新顯示在輸入框裡的格式。在這個範例中實在沒有多大意義，但如果是金額的輸入時，就大有用處了。寫在這裡，只是提醒自己有這個屬性的存在，可以在輸入數值後，改變數值的顯示格式，然後再一次顯示在數值輸入框中，讓使用者確認。

proptMessage 的訊息為欄位獲得焦點 (focus) 的提示輸入訊息。

missingMessage 是在欄位失去焦點 (blur) 卻沒有輸入值時的警告訊息

invalidMessage 欄位的輸入值不合格式要求 (invalid) 時的錯誤訊息。

rangeMessage 是在輸入數值超出允許數值的範圍時，所要顯示的訊息。

tooptipPosition 需給予一個指定方位的陣列，訊息會依陣列中方位的前後次序，在螢幕上尋找合適的空間顯示訊息。範例中給的值是 "['below', 'above']"，因此訊息會優先出現在欄位的下方，如果此時欄位已經在流覽器視野 (viewport) 的最下方時，訊息就會採用第二順位的位置，出現在欄位的上方。如果屬性值是 "['after', 'before']" 時，訊息就出現在欄位的右方，右方沒有位置時，就出現在左方，以此類推。也可以把四個方向的值都放到陣列中，讓流覽器在上下左右找個最合適的位置顯示訊息。

訊息在顯示時，用的是 dijit/Tooltip 這個元件，字型的大小比 HTML 預設 title 屬性的字型要大些，看得比較清楚。

熊伯的外接硬碟

2015年9月29日星期二