• ベストアンサー

ウェブページ上のプルダウンメニューをキーボード入力で制御するには

ウェブページ上のプルダウンメニューをキーボード入力で制御するには どうすればいいのでしょうか。 プルダウンメニューとは <SELECT NAME="test"> <OPTION VALUE="">項目1</OPTION> <OPTION VALUE="">項目2</OPTION> .... </SELECT> のようなものです。 意味不明でしたら加筆修正しますのでよろしくお願いします。

  • HTML
  • 回答数3
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

メニューにフォーカスが有る状態でカーソルキー OSやブラウザによってはaltとかのモディフィアキーを組み合わせないと駄目な場合も有るけど 基本カーソルキー。 フォーカスはtabで変移

kimidora
質問者

お礼

ご回答ありがとうございます。 それが知りたかったんです!

その他の回答 (2)

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.3

「制御」が何をしたいのかがわからないわね。 単に、キーボードで選択したいのなら プルダウンにフォーカスが当たった状態で 上下キーを押せば選べるし ALT押しながら上下キーを押せば 一覧が見えるわ。

kimidora
質問者

お礼

ご回答ありがとうございます。 それが知りたかったんです!

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

たとえばこんな感じで 入力系の制御なので、もう少し条件を絞る必要があると思います <script> try{ document.addEventListener('keydown',function(e){func(e)},true); }catch(e){ document.attachEvent('onkeydown',function(e){func(e)}); } function func(e){ var t = (e.srcElement || e.target); var test=document.getElementById("test"); var k = e.keyCode; var keylist={49:0,50:1,51:2,52:3,53:4,97:0,98:1,99:2,100:3,101:4}; if(typeof keylist[k]=="number") test.selectedIndex=keylist[k]; } </script></script> <SELECT NAME="test" id="test"> <OPTION VALUE="">項目1</OPTION> <OPTION VALUE="">項目2</OPTION> <OPTION VALUE="">項目3</OPTION> <OPTION VALUE="">項目4</OPTION> <OPTION VALUE="">項目5</OPTION> </SELECT>

kimidora
質問者

お礼

ご回答ありがとうございます。 すみません、他のかたに回答いただいた内容が知りたかったです。 お手数をおかけいたしました。m(_ _)m

関連するQ&A

  • プルダウンメニューの利用

    htmlのプルダウンメニューを使用した値計算のインタフェースを作成したいと思っています。 プルダウンメニューに設定するメニュー項目に値を設定し、 onChangeを使用して、その値だけをPHPプログラムに渡すようにしたいのですが、 JavaScript部分をどのように書けばいいのか判りません。 どなたかご教授お願いいたします。 <form name="formtest" action="test.php" method="post"> <table> <tr> <th>カテゴリ*</th> <td> <SELECT NAME="iPlanet" onchange=""> <OPTION VALUE="9" selected>初期値 <OPTION VALUE="0">サンプル1 <OPTION VALUE="1">サンプル2 </SELECT> </td></tr> </table> </form> onchangeでValueの値をPHPに送りたいのです。 よろしくお願いします。

  • プルダウンメニュー

    質問があります。 プルダウンメニューでページを選択された項目を 次のページに受け渡したあと、修正するために もう一度フォームに戻ったら選択されていた項目が保持されておらず、 再度選択する必要が出てきてしまいます。 これでは使い勝手があまりよくないと思い、一度選択された項目が破棄されることなくページが切り替わりっても選択されているままの状態に出来ることは可能なのでしょうか。 aaa.php <td>都道府県</td> <td><select name="prefecture"> <option>▼地域をお選び下さい▼</option> <option value="東京都">東京都</option> <option value="埼玉県">埼玉県</option> <option value="千葉県">千葉県</option> <option value="神奈川県">神奈川県</option> </select></td> bbb.php // echo $prefecture; 再度aaa.phpに戻る際に情報を保持したまま 修正。 教えて頂けませんでしょうか。

    • 締切済み
    • PHP
  • プルダウンメニューの内容の取得方法ってありますか?

    プルダウンメニューで、VALUE値 選択された項目の内容って取得できないんでしょうか。 <FORM NAME="sltTest"> <SELECT NAME="slt01"> <OPTION VALUE="01">内容1</OPTION> <OPTION VALUE="02">内容2</OPTION> </SELECT> </FORM> たとえば上記のようなメニューのとき、 選択された「内容1」もしくは「内容2」を取得したいとき どう記述すれば取得可能でしょうか。

  • WEB画面におけるプルダウンメニューで選択した値の保持

    web画面において、各頁にプルダウンメニューを設定し、そこから各頁へジャンプさせたいと思っています。 TOP画面のプルダウンメニューを [選択して下さい]→[pageA]→[pageB]とし、 top画面のプルダウンメニューより[pageA]を選択した場合 pageAのプルダウンメニューでは [選択して下さい]ではなく、[pageA]が表示させたいのですが この場合、どうすれば宜しいのでしょうか? 私が組んだソースは下記の通りですが 下記の場合だと、各頁にジャンプ後も [選択して下さい]が表示されてしまいます。 <form> <select onchange="location.href = options[this.selectedIndex].value;">    <option value="#">選択して下さい。</option> <option value="pageA.html">pageA</option> <option value="pageB.html">pageB</option> </select> </form> 初心者の為、ご教授頂けると助かります。

  • プルダウンメニューの数

    現在、 <td colspan="5" align="center"> 列数: <select name="COL"> <option value="6">6列</option> <option value="10">10列</option> </select> <input type="submit" value="再表示"></input> </td> このような形でプルダウンメニューを作成したのですが 現在、2つの値を設定しているのですがこれを、設定ファイルのような物で制御したいと考えているのですがどのようにすれば宜しいでしょうか? データバインド等を使ったのですがうまくいきません。 よろしくお願いします

  • 複数のプルダウンメニューの作り方。

    ・Aリスト、Bリスト…とプルダウンメニューを複数含んだフォームを一つのhtmlに作りたいのですが、上手くいきません。 一つのフォームに一つのプルダウンメニューは上手くいくのですが、Javascriptを二つ並べると動かなくなります。 とりあえず関数名を重複しない様にしたらいいという事だけはネットで調べてわかりました。 今は、下記の状態になっています。 <script language="JavaScript"> <!-- function MENU(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --> </script> <form name="myForm"> <select name="myMenu" onChange="MENU()"> <option value="">A</option> <option value="a001.html">A001</option> <option value="a002.html">A002</option> <option value="a003.html">A003</option> </select> <select name="myMenu2" onChange="MENU()"> <option value="">B</option> <option value="b001.html">B001</option> <option value="b002.html">B002</option> <option value="b003.html">B003</option> </select> </form> ご指南の程宜しくお願いします。

  • フレームを使用した複数プルダウンメニュー

    こんにちは。 よくある質問もみたのですが「複数のプルダウンメニュー」「フレームを使ったプルダウン」というのはあるのですが、 フレームを使用して左フレームに複数プルダウン、そこで選んだものを右フレームに表示させるというのが見つかりませんでした。 「複数のプルダウンメニュー」もつくれますし、「別フレームに表示させる」こともできるのですが、 プルダウンを増やしたとたんに動きません。 ネームを変えてもみたのですがうまくいきません。 フレームを二つつくって <FRAMESET cols="35%,65%"> <FRAME src="n_menu.htm" name="manu">←こっちにプルダウンメニュー <FRAME src="n_main.htm"name="main">←こっちに表示 目次のhtmファイルで <SCRIPT LANGUAGE="JavaScript"> function openPage() { var list = document.forms[0].urlList; parent.frames[1].location = list.options[list.selectedIndex].value; } </SCRIPT> </HEAD> <FORM> <SELECT NAME="urlList" onChange="openPage()"> <OPTION SELECTED VALUE="cover1.htm">朝の歌 <OPTION VALUE="1.htm">1番目のページ <OPTION VALUE="2.htm">2番目のページ <OPTION VALUE="3.htm">3番目のページ </SELECT> </FORM> #上記をコピペして増やしてみた↓ <FORM> <SELECT NAME="urlList2" onChange="openPage()"> <OPTION SELECTED VALUE="cover2.htm">夜の歌 <OPTION VALUE="4.htm">4番目のページ <OPTION VALUE="5.htm">5番目のページ <OPTION VALUE="6.htm">6番目のページ </SELECT> </FORM> これだと2本目が表示されません。 どうすればいいか教えていただけないでしょうか?

  • フレームを使ったプルダウンメニュー

    フレームで「ヘッダー・左メニュー・右メインページ」というように3分割にし、左メニューに置いたプルダウンから項目を選ぶと右メインに表示される、という構造にしたいと思っています。 <HEAD>~</HEAD>内↓ <script language="JavaScript"> function jump(form) { var myindex=form.destination.selectedIndex window.open(form.destination.options[myindex].value, target="main"); } //--> </SCRIPT> プルダウン部分↓ <FORM NAME="form"> <SELECT NAME="destination"> <OPTION VALUE="a.html" SELECTED>あ</OPTION> <OPTION VALUE="k.html">か</OPTION> <OPTION VALUE="s.html">さ</OPTION> <OPTION VALUE="t.html">た</OPTION> <OPTION VALUE="n.html">な</OPTION> </SELECT> <INPUT TYPE="image" SRC="go.gif" onClick="jump(this.form)" BORDER="0"> </FORM> という様に記述した所、例えばプルダウンで「た」を選択した場合、右フレームにちゃんとt.htmlが表示されるのですが、左フレームのプルダウンの項目が「あ」に戻ってしまいます。「た」を選択した状態のまま残したいのですが。 ちなみにボタンに画像を使わず、<INPUT TYPE="button" ・・・・>にするとなぜか「た」選択の状態でちゃんと残ります。でも、できれば画像を使いたいのです。 うまいやり方をご存じの方は、教えていただけますか。おねがいします。

  • プルダウンメニューからのリンクの貼り方

    FORMのプルダウンメニューからリンクをはっていますが、新しいページを開くのはどうしたら良いでしょう? 今は <select name="menu" size="1" onchange="location=this.options[this.selectedIndex].value"> と書いていて、同じページ内で別ページに移動します。 またプルダウンメニューからのリンクで、ページサイズを指定したり、スクロールバー、ツールバーの表示も指定したいのですが出来るのでしょうか? ご存知なかたはよろしくお願いします。

  • 同一ページに複数のプルダウンメニュー

    同一ページに複数のプルダウンメニューをつけたいのですが、 どうすればよいのでしょうか。 下記のように1つはつけることができたのですが、 2つめから、どこをどう変えて追加すればよいのかわかりません。 <script language="javascript"> <!-- function A_Li(){ Sel=document.Link1.OP.selectedIndex; Ms=document.Link1.OP.options[Sel].value; parent.main.location.href=Ms;} // --> </script> <FORM name="Link1"> <SELECT name="OP" onChange="A_Li()" size="1"> <OPTION Value="main.htm" SELECTED>ページを選んでください <option value="main.htm">ぺージ1</option> <OPTION Value="abc.htm">ページ2 <OPTION Value="def.htm">ページ3 </SELECT> よろしくお願いします。

専門家に質問してみよう