このセクションでは、要素のフォーカスと選択を処理する方法を説明します。
フォーカスされた要素とは、現在、入力イベントを受け取っている要素のことです。ウィンドウにテキストボックスが 3 つあるとすれば、そのうちのフォーカスのあるテキストボックスだけに、ユーザーは、テキスト入力できます。一度にウィンドウごとに一つの要素だけがフォーカスをもつことができます。
ユーザーは要素をマウスでクリックするか TAB キーを押すことによってフォーカスを変更することができます。TAB キーを押すと、次の要素がフォーカスを受け取ります。
フォーカスイベントは、フォーカスが要素に与えられるとき、応答するのに使用されます。ブラーイベント (blur event) は、要素がフォーカスを失うとき、応答するのに使用されます。要素に onfocus や onblur 属性を加えることにより、これらに応答することができます。それは、HTML の対応する部分と同じように機能します。これらのイベントハンドラーは、要素を強調したり、テキストをステータスバーに表示するのに使うことができます。
残念ながら、これらは Mozilla ではまだ完全に動作するという訳ではありません。しかし、これには、DOM2 イベント関数を使って、フォーカスイベントハンドラーとブラーイベントハンドラーを追加できるという簡単な回避策があります。フォーカスとブラーイベントハンドラーは、頻繁に使用される訳ではありません。そのため、これはあまり問題にならないでしょう。
関数 addEventListener を使うと、イベントハンドラーを動的に要素に追加できます。これはどんな要素やイベント型にも使えます。これは、3 つのパラメータを取ります。イベント型とイベントが発生したときに実行する関数、イベントを捉えるかどうかを指示する boolean です。
以下の例を使うと、関数にフォーカスイベントを処理させることができます。
XUL:
<window id="focus-test" title="Focus Test"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
onload="Init()">
<textbox id="tbox1"/>
<textbox id="tbox2"/>
<description id="sbar" value=""/>
</window>
Script:
function Init()
{
var elem=document.getElementById('tbox2');
elem.addEventListener('focus',displayFocus,true);
}
function displayFocus()
{
var elem=document.getElementById('sbar');
elem.setAttribute('value','Enter your phone number.');
}
|
この例では、ページがロードされたとき、Init 関数が呼び出されます。addEventListener 関数は 2 番目のテキストボックスにフォーカスイベントハンドラーを追加します。イベントが発生すると、これは displayFocus 関数を呼び出します。この関数はテキストラベルの値を変更します。この例は、ブラーイベントが発生したときに、テキストを取り去るように拡張できるでしょう。
特定の要素にフォーカスを設定するために、XUL 要素のフォーカスメソッドが使えます。ブラーメソッドは、フォーカスを取り除くのに使えます。以下は、この例です。
<textbox id="addr"/>
<button label="Focus" onclick="document.getElementById('addr').focus()"/>
|
要素がフォーカスされるといつでも、テキストボックスには、特殊属性 focused が追加されます。要素がフォーカスされているかどうか判断するために、スクリプトからやスタイルシート内から、この属性があるかチェックできます。フォーカスされている場合、これは、true という値になります。テキストボックスがフォーカスされていない場合、この属性は存在しません。この特別な機能はテキストボックスだけに適用され、他の要素には適用されません。
テキストボックス内のテキストをユーザーが選択する場合があるかもしれません。テキストボックスを使って作業する場合、フィールドのテキスト全体ではなく、ユーザーが選択した個所だけを検索したい場合があります。また、現在選択されている部分を変更したい場合があるかもしれません。
XUL テキストボックスは、選択されている個所を検索し、変更する方法をサポートしています。最も簡単なのは、テキストボックスのテキストすべてを選択することです。これには、テキストボックスの select メソッドを使います。
tbox.select(); |
しかし、テキストの一部だけが欲しい場合もあるかもしれません。このためには、setSelectionRange 関数が使えます。これはパラメータを 2 つ取ります。最初のパラメータは開始文字の位置で、2 番目は選択したい最後の文字の後にある文字の位置です。値は 0 がベースです。そのため、最初の文字は 0 で、2 番目の文字は 1 というようになります。
tbox.setSelectionRange(4,8); |
この例は、表示された 5 番目の文字から 8 番目の文字までを選択します。フィールドに 6 文字しか入力されなかった場合は、5 番目の文字と 6 番目の文字が選択されます。エラーにはなりません。
2 つのパラメータに同じ値を使うと、選択の開始位置が変更され、終了位置が開始位置と同じになります。この結果、テキストボックス内のカーソル位置が変更されます。例えば、下の例を使うと、テキストの先頭にカーソルを移動させることができます。
tbox.setSelectionRange(0,0); |
テキストボックスの内容を検索し、label 属性を使ってその内容を変更することができます。
現在選択されている部分を selectionStart と selectionEnd プロパティーを使って検索することができます。これらのプロパティーには、それぞれ、開始位置と終了位置が設定されます。2 つを同じ値に設定すると、テキストは選択されず、値は現在のカーソル位置になります。開始位置と終了位置が取得できたら、テキスト全体から文字列の一部を取り出すことができます。
テキストボックスのその他の役立つプロパティーに textLength があります。これは、フィールド内にある全文字数を保持します。
(進む) テキストボックスで選択する方法を見てきました。次は、ツリーで選択する方法を見ることにしましょう。