WEB相談室

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

タイトル:矢印キーによる画像ボタンのフォーカス移動

0:[投稿] あき [2005/12/05 00:11 ] [環境:IE6、WINXP PHP]

こんばんは。今、矢印キーによる画像ボタンのフォーカス移動を作成しているところなのですが上手いこといかずに困っています。
こちらの過去ログにあったテキストボックスのフォーカス移動を参考にさせてもらって作成しているのですが画像ボタンにする際にどこを変えれば良いのかわかりません。教えていただけませんかお願いします。
以下がこちらにあったフォーカス移動のプログラムです。
<script>
var arrTextbox = new Array();
function do_init() {
   var arrInput = document.getElementsByTagName('input');
   for (var i=0; i<arrInput.length; i++) {
       if (arrInput[i].type == 'textbox') {
           arrTextbox.push(arrInput[i]);
           arrInput[i].onkeydown = textbox_get_keydown;
       }
   }
}

function textbox_get_keydown() {
   // 押されたキーコード
   var this_keyCode = window.event.keyCode;
   // イベントが起きたテキストボックス
   var objThisTextbox = window.event.srcElement;
   var step;
   var indexFocusedTextbox;
   // 左右どちらかのカーソルキーが押されたことを知らせる
   var sw;
   if (this_keyCode == 37) {
       // Left
       step = -1;
       sw = 1;
   }
   else if (this_keyCode == 39) {
       // Right
       step = 1;
       sw = 1;
   }
   //
   if (sw) {
       for (var i=0; i<arrTextbox.length; i++) {
           if (objThisTextbox == arrTextbox[i]) {
               indexFocusedTextbox = i + step;
               if (indexFocusedTextbox < 0) {
                   indexFocusedTextbox += arrTextbox.length;
               }
               else if (indexFocusedTextbox >= arrTextbox.length) {
                   indexFocusedTextbox = 0;
               }
               break;
           }
       }
       arrTextbox[indexFocusedTextbox].focus();
   }
}
</script>


1:[回答] 老衰 [2005/12/05 01:15 ]

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
window.onload = function() {
 var inp = document.getElementsByTagName("input");
 for (var i=0;i < inp.length;i++) {
   inp[i].onkeydown = function(idx,inps) {
      return function() {
        if (event.keyCode == 37) {
          if (idx > 0) {
             inps[idx-1].focus();
          }
        }
        else if (event.keyCode == 39) {
          if (idx+1 <inps.length) {
             inps[idx+1].focus();
          }
        }
      }
   }(i,inp);
 }
}
</SCRIPT>
<table border>
<tr><td><input type=text>
<tr><td><input type=text>
<tr><td><input type=text>
<tr><td><input type=text>
</table>


2:[回答] 老衰 [2005/12/05 01:25 ]

↑これの、inp[i].type.toLowerCase() == "image" ってやればOK。


3:[完了] あき [2005/12/05 17:19 ]

サンプルありがとうございます。
無事完成しました。とても助かりました。

回答(必須): 状態:

お名前(必須):

URL:




[戻る]