2007年9月 3日(月) 11時48分27秒 [入力フォーム]
入力欄に対応するラジオボタンに自動でチェックを入れる
複数の選択肢（チェックボックスやラジオボタン）があって、それに対応するテキスト入力欄がある場合、チェックボックスやラジオボタンをクリックしてからテキスト入力欄に文字列を入力するのは面倒ですよね。
テキスト入力欄に文字列を入力した時点で、「その項目を選択したい」事実は明白なのだから、テキスト入力欄に何か入力された時点で、自動的にその入力欄に対応するチェックボックス（またはラジオボタン）にチェックを入れてあげるのが、良いインターフェイスだと思います。
というわけで、そんな「テキスト入力欄に連動して自動チェックするラジオボタン」機能を作ってみました。
上記の3つのテキスト入力欄に何か入力したり入力内容を編集したりすると、それに対応するラジオボタンにチェックが入ります。（ただし、チェックが入るのは編集後に『入力欄から外に出た瞬間』であって、『入力した瞬間』にはチェックされません。）
この「テキスト入力欄に連動して自動チェックするラジオボタン」機能を作るソースは以下の通り。
まず、JavaScript：
function AutoCheck(checkname) {
document.getElementById(checkname).checked = true;
}
// --></script>
このAutoCheck関数では、引数として任意のラジオボタン（またはチェックボックス）に振られたID名を受け取っています。そのラジオボタンにチェックを入れる作業を行います。
んで、HTML（入力フォーム）：
<input type="radio" name="wt" id="wt1" value="1" /><label for="wt1">選択肢1</label>：<input type="text" name="t1" value="" onchange="AutoCheck('wt1');" /><br />
<input type="radio" name="wt" id="wt2" value="2" /><label for="wt2">選択肢2</label>：<input type="text" name="t2" value="" onchange="AutoCheck('wt2');" /><br />
<input type="radio" name="wt" id="wt3" value="3" /><label for="wt3">選択肢3</label>：<input type="text" name="t3" value="" onchange="AutoCheck('wt3');" /><br />
</form>
テキスト入力欄を作るinput要素に対して、onchangeイベントから先ほどのAutoCheck関数を呼び出しています。このとき、AutoCheck関数の引数には、対応するラジオボタンのID名を入れています。「wt1」とか「wt2」とか。
onchangeイベントは、内容が変化した場合に発生するイベントです。
このようにしておくと、ユーザがラジオボタンをクリックする手間が省けて良いかも知れません。
ただし、onchangeイベントが発生するのは、「テキスト入力欄の内容が変化した後、テキスト入力欄からフォーカスがなくなったとき」です。
つまり、テキスト入力を完了して、他の項目へ移動しようとしたときに自動チェックが行われるのですよね。入力した瞬間に自動チェックが行われるわけではありません。なので、「対応するラジオボタンのチェック忘れを自動的に防ぐ」程度の機能にしかならないかも知れません。(^_^;;;
他に使えそうなイベントとしては、onkeypressイベントがあります。何かキーが押された瞬間に発生するイベントです。これなら良さそうですが、[Tab]キーによる入力欄の移動でもイベントが発生してしまったり、日本語入力機能（IME）を経由しての入力には反応しなかったり、いろいろ問題があります。
onfocusイベントもありますが、入力欄にカーソルを入れた瞬間に発生するので、やはり[Tab]キーによるフォーム間の移動中に一時的に入っただけでもチェックされてしまうので、問題があります。
まあ、補助的な機能ということで、そんなに厳密に対応しなくても良いと考えてもいいんじゃないでしょうかね。(^_^;)
（そんな結論か。^^;）
この日記へのコメントはお気軽に！ コメント数:0 トラックバック数:0
| « フォームのリセットボタンに確認機能を加える |
前後のエントリ < 旧 ／ 新 > | 行間をユーザが変更できるようにする » |
JavaScript TIPS 主要なカテゴリ
現在、以下のカテゴリに区分してTIPSを公開しています。