WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:押下キーによってセレクトボックスの値をかえる

0:[投稿] そら [2003/04/08 16:47 ][環境:IE6 わからない]

はじめまして。

<select name="sel_1">
<option value="1">あいうえお_1
<option value="2">かきくけこ_1
<option value="3">あいうえお_2
<option value="4">さしすせそ_1
<option value="5">かきくけこ_2
</select>

というようなセレクトボックスで、フォーカスが当たっているときに、"a"のキーが押されたら、あいうえお_1に移動。
次に"a"のキーが押されたら、あいうえお_2に移動。

同様に"k"のキーが押されたら、かきくけこ_1に移動。
次に"k"のキーが押されたら、かきくけこ_2に移動。

の様なことがやりたいです。

こんなことは可能なのでしょうか。


1:[回答] chintara [2003/04/09 12:07 ]

サンプルです。IE6SP1、Netscape7、Opera7で動作確認しました。

<script>
window.onload = init;

function init() {
   document.form_1.sel_1.onkeydown = setIndex;
}

function setIndex(e) {
   var code = (e == null) ? window.event.keyCode : e.keyCode;
   var sel = document.form_1.sel_1;

   switch (code) {
   case 65:  // 'a'が押された場合
       sel.selectedIndex = (sel.selectedIndex == 0) ? 2 : 0;
       break;
   case 75:  // 'k'が押された場合
       sel.selectedIndex = (sel.selectedIndex == 1) ? 4: 1;
       break;
   case 83:  // 's'が押された場合
       sel.selectedIndex = 3;
       break;
   }
}
</script>

<form name="form_1">
<select name="sel_1">
<option value="1">あいうえお_1
<option value="2">かきくけこ_1
<option value="3">あいうえお_2
<option value="4">さしすせそ_1
<option value="5">かきくけこ_2
</select>
</form>

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World