ユーザがテキストを入力することができる input フィールド。これは HTML の input 要素に似ています。デフォルトでは一行のテキストフィールドのみが表示されます。multiline 属性で複数行のフィールドを表示するように指定することもできます。
詳しい情報は XUL チュートリアルにあります。
- 属性
- cols, decimalplaces, disabled, emptytext, hidespinbuttons, increment, label, max, maxlength, min, multiline, newlines, onchange, oninput, placeholder, preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound
- プロパティ
- accessibleType, clickSelectsAll, decimalPlaces, decimalSymbol, defaultValue, disabled, editor, emptyText, increment, inputField, label, max, maxLength, min, placeholder, readOnly, searchButton, selectionEnd, selectionStart, size, spinButtons, tabIndex, textLength, timeout, type, value, valueNumber, wrapAround
- メソッド
- decrease, increase, reset, select, setSelectionRange
- スタイルクラス
- plain
例
<vbox> <label control="your-name" value="Enter your name:"/> <textbox id="your-name" value="John"/> </vbox>
属性
-
cols - 型: 整数型
- 複数行の textbox で表示するための桁数。
-
decimalplaces - 型: 整数型
- 表示する小数点以下の桁数。デフォルト値の 0 は小数点以下の桁を表示しません。小数点以下の桁数を無制限にしたいときは、値を
Infinityにします。小数は float として格納されるので注意してください。
-
disabled - 型: 論理型
-
要素が無効化されているかどうかを示します。ある要素が
trueに設定されていたら、その要素は無効化されています。無効化された要素は通常グレイ表示のテキストで描画されます。要素が無効化されていると、ユーザのアクションには応答せず、フォーカスもあてられず、commandイベントも発生しません。
emptytext非推奨 Gecko 2- 型: 文字列型
- textbox が値を持たない時に表示される文字列。これは、Gecko 2.0 で
placeholder属性に代わりました。この古い属性名は互換性のために残されていますが、使用している場合はコードを更新すべきです。
max- 型: 整数型
- スケールまたは数値ボックスの取り得る最大値。スケールの場合の初期値は 100、数値ボックスの場合の初期値は無限。
-
maxlength - 型: 整数型
- textbox に入力することができる最大文字数。
- {{ XULAttr("min") }}{{ page.unprefixedpath == 'XUL:textbox' ? template.Fx_minversion_inline(3) : '' }}
- 型: 整数型
- スケールあるいは数値ボックスの取りうる最小値。デフォルト値は 0 です。
-
multiline - 型: 論理型
-
trueの場合、textbox は複数行を表示します。ユーザが Enter を押すと改行されます。falseの場合、textbox は一行のみ入力を許可します。
-
newlines - 型: 文字列型
- textbox に貼り付けられた改行の扱い方。
- 可能な値:
pasteintact: 変更なしで改行を貼り付ける。pastetofirst: 最初の改行の前のテキストのみを貼り付ける。残りのテキストは破棄されます。replacewithcommas: 改行をカンマに置き換えたテキストを貼り付ける。replacewithspaces: 改行をスペースに置き換えたテキストを貼り付ける。strip: 改行を取り除いたテキストを貼り付ける。stripsurroundingwhitespace: 空白を取り除いた改行付きのテキストを貼り付ける。
-
onchange - 型: スクリプトコード
- このイベントは、textbox の値が変更された時、送られます。イベントはフォーカスが他の要素に移動するまで送られません。
placeholder- 型: 文字列型
- textbox が値を持たない時に表示される文字列。
-
preference - 型: 要素の id
- 要素を対応する
preferenceにつなぎます。この属性はprefwindow内で使用された場合のみ効果があります。preference の値は、要素のvalueプロパティと一致するように更新されます。
readonly- 型: 論理型
trueに設定した場合、ユーザは要素の値を変更できません。しかし、スクリプトからは依然として値を変更できます。
Gecko 2 note
Gecko 2.0 まで、(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
readonly 属性は XBL フィールド上で正しく動作しませんでした。-
rows - 型: 整数型
- 要素内に表示する行数。要素がこの数値よりも多くの行を含むときはスクロールバーが現れます。要素内の実際の rows の値を取得するには
getRowCountメソッドを使用してください。
-
size - 型: 整数型
- textbox に表示することのできる文字数。
-
spellcheck - 型: 論理型
-
trueの場合、textbox のためのスペルチェックがデフォルトで有効になります。falseの場合、スペルチェックがデフォルトで無効になります。 - 指定されない場合、これはデフォルトで
falseです。
-
tabindex - 型: 整数型
- 要素のタブの順番。タブの順番は
tabキーが押下されたときにフォーカスが移動する順番です。より大きなtabindexの値をもつ要素は、タブの遷移が後になります。
-
timeout - 型: 整数型
- 時間制限付きの textbox のための、command イベント発生までのミリ秒数。タイマーはユーザが文字を入力すると開始します。ユーザが他の文字を入力するとタイマーがリセットされます。
-
type - 型: 下記の値のいずれか一つ
- 特別な形式の textbox を使用するには、下記の値のいずれか一つを type 属性に設定します。
autocomplete: 自動補完をサポートする textbox。自動補完 textbox についての詳しい情報は、自動補完 (autocomplete)のドキュメントをご覧ください。(Mozilla) (Firefox)number: 数字のみを入力することができる textbox。さらに、値を増減するための矢印ボタンが textbox の次に現れます。number textbox を設定するための属性は次のものがありますminおよびmax,increment,wraparound,hidespinbuttons。password: 入力した内容を隠す textbox。パスワードの入力に使用されます。timed: この textbox は、ユーザが文字を入力して時間が経つと command イベントを発生させます。遅延時間はtimeout属性で設定します。この形式は例えば、ユーザが入力した window の情報を更新するために使用します。ユーザが時間内にさらにキーを入力すれば、タイマーを発動させないために継続的に更新する必要はありません。ユーザが Enter キーを押下した場合にも command イベントが発生します。
-
wrap - 型: 文字列型
- textbox 内のワードラップを無効にするには、この属性の値を
offに設定します。この属性が指定されていないときは、ワードラップが有効です。
-
wraparound - 型: 論理型
-
trueの場合、数値ボックスの値は、最大値または最小値を超えると丸められます。最小値および最大値は両方とも無限であってはなりません。
プロパティ
-
accessibleType - 型: 整数型
- 要素の accessibility オブジェクトの種類を示す値。
-
clickSelectsAll - 型: 論理型
-
trueに設定した場合、フォーカスされた時、textbox の内容が選択されます。カーソルは変更無しで取り去られます。
decimalPlaces- 型: 整数型
decimalplaces属性の値の取得と設定
decimalSymbol- 型: 文字列型
- 小数点に使用する文字。デフォルト値はピリオド (.) です。
-
defaultValue - 型: 文字列型
- textbox のデフォルト値の取得と設定。
emptyText非推奨 Gecko 2- 型: 文字列型
- textbox が値を持たないときに表示される文字列の取得/設定。これは、Gecko 2.0 で
placeholderプロパティに代わりました。この古い属性名は互換性のために残されていますが、使用している場合はコードを更新すべきです。
-
inputField - 型: textbox 要素
- Mozilla では、XUL textbox は HTML の input 要素のラッパとして実装されています。この読み取り専用のプロパティは、この内部 input 要素への参照を保持します。
-
maxLength - 型: 整数型
- textbox に入力することができる文字数の最大値。
placeholder- 型: 文字列型
- textbox が値を持たないときに表示される文字列の取得と設定。
-
readOnly - 型: 論理型
-
trueに設定すると、ユーザは要素の値を変更できなくなります。
searchButton- 型: 論理型
searchbutton属性の値の取得と設定。
-
selectionEnd - 型: 整数型
- フィールドのテキストの選択部分の末尾の取得または設定。
selectionStartプロパティと共に使用します。この値は選択後の文字の index を指定します。この値がselectionStartプロパティの値と等しいときは text が選択されませんが、値は textbox 内のキャレット(カーソル) の位置を示します。
-
selectionStart - 型: 整数型
- フィールドのテキストの選択部分の先頭の取得または設定。
selectionEndプロパティと共に使用します。値は選択された最初の文字の index を指定します。
spinButtons- 型: 要素
- この読み取り専用のプロパティは、数値ボックスで使用される
spinbuttons要素への参照を返します。
-
textLength - 型: 整数型
- textbox に入力されたテキストの長さを保持。このプロパティは読み取り専用です。
-
value - 型: 文字列型
- textbox の現在の値を文字列として保持します。現在の値を変更するには、このプロパティを設定します。
-
valueNumber - 型: 数値
-
valueプロパティが文字列を保持するのと対照的に、valueNumberプロパティは数値ボックスの現在の値が含まれる数値です。
-
wrapAround - 型: 論理型
-
wraparound属性の値の取得と設定。
メソッド
decrease()- 戻り値の型: 戻り値無し
- scale または数値ボックスの値を
increment分減らす
-
increase() - 戻り値の型: 戻り値なし
-
scale または数値ボックスの値を
increment分増やす。
select()- 戻り値の型: 戻り値無し
- textbox 内のすべてのテキストを選択します。
setSelectionRange( start, end )- 戻り値の型: 戻り値無し
- textbox の選択部分を設定します。start 引数は選択範囲の最初の文字の index です。end 引数は選択範囲の直後の文字の index です。テキストを選択せずに指定の位置へカーソルを移動するには、両方の引数を同じ値に設定してください。
XUL 要素からの継承
blur, click, doCommand, focus, getElementsByAttribute, getElementsByAttributeNS
DOM 要素からの継承
addEventListener(), appendChild(), compareDocumentPosition, dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), getFeature, getUserData, hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isEqualNode, isSameNode, isSupported(), lookupNamespaceURI, lookupPrefix, normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS(), setUserData
スタイルクラス
次のクラスは要素のスタイル付けに使用されます。これらのクラスは、ユーザの選択したテーマに自然に合うようにするため、要素のスタイルを直接変更する代わりに使用されます。
-
plain - このクラスによって、要素は border や margin なしで表示されます。
補足
複数行のテキストボックスでは、maxlength 属性は動作しません。代替策として、以下のように JavaScript と onkeypress イベントハンドラを使用してください。
XUL スクリプト:
<textbox id="pnNote" multiline="true" rows="2" cols="70" onkeypress="return pnCountNoteChars(event);"/>
Javascript:
function pnCountNoteChars(evt) {
//allow non character keys (delete, backspace and and etc.)
if ((evt.charCode == 0) && (evt.keyCode != 13))
return true;
if (evt.target.value.length < 10) {
return true;
} else {
return false;
}
}