- ベストアンサー
JavaScriptのキーイベントについての質問です。
JavaScriptのキーイベントについての質問です。 フォーム上にテキストボックス、セレクトボックス、ボタンがあります。 それぞれの項目移動をキーボード（enter）で行いたいのですが、 テキストボックスからセレクトボックスへの移動は、 onkeydownとonblurにより、enter押下にて行えるのですが、 セレクトボックスからボタンへの移動が行えません。 これは可能なのでしょうか？ できればセレクトボックスにフォーカスされている時にenter押下で、ボタンを押すようにしたいです。 ブラウザはＩＥです。 どなたか是非ともご教示お願い致します。
- nachimo150
- お礼率50% (2/4)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
いまいち仕様が明確でないですよね？ (1)エンターで項目移動する (2)セレクトでエンターすると移動？ボタンをおす？ (3)ボタン上でエンターすると・・・？ とりあえずエンターでぐるっと一回りするならこんな感じで・・・ <script> try{ document.addEventListener('keydown',function(e){keydownfunc(e)},true); }catch(e){ document.attachEvent('onkeydown',function(e){keydownfunc(e)}); } function keydownfunc(e){ var t = (e.srcElement || e.target); if(t.nodeName!="INPUT" && t.nodeName!="SELECT") return false; if(e.keyCode==13){ f=t.form; for(var i=0;i<f.length;i++){ if(t==f[i]){ if(e.shiftKey){ var n=(i==0)?f.length-1:i-1; }else{ var n=(i==f.length-1)?0:i+1; } f[n].focus(); break; } } } } </script> <form> <p> <input type="text"> <select> <option value="">---</option> <option value="test">test</option> </select> <input type="text"> <select> <option value="">---</option> <option value="test">test</option> </select> <input type="button" value="hoge"> </p> </form>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
現状がどうなさっているのか不明ですが… form内のエレメントでenterキーによって移動する例。 tabindexを指定している場合はその順を優先します。下例では表示の下から上への順になっています。 （その都度評価しているので、効率はかなり悪いですが、ご参考まで） formの場合、enterキーがsubmitに変わる働きをする場合がありますが、そのキャンセルは行なっていません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function keycheck(evt) { if (evt.keyCode != 13) return; var t = evt.target || evt.srcElement; var i, index, ti=[], te, max=-1, e = t.form.elements; for (i=0; i<e.length; i++) { if (te=e[i].tabIndex) ti[i] = te, max = max<te?te:max; if (e[i] == t) index = i; } for (i=0; i<e.length; i++) if (!ti[i]) ti[i] = ++max; te = ti[index]>=max?-1:ti[index]; for (i=0; i<e.length; i++) if (ti[i]>te && ti[i]<=max) max = ti[i], index = i; e[index].focus(); } //--> </script> </head> <body> <form onkeydown="keycheck(event)"> <input type="text" name="input1"> <p> <input type="text" name="input2" tabindex=7> <p> <select name="select1" tabindex=5> <option value="option1">option1</option> <option value="option2">option2</option> </select> <p> <input type="button" name="button1" value="button1" tabindex=3><br> <button type="button" tabindex=1>button2</button> </form> </body> </html>
お礼
lengthでまわしてkeyコードでbuttonの判断して解決しました。 ありがとうございました。
お礼
lengthでまわしてkeyコードでbuttonの判断して解決しました。 ありがとうございました。