- ベストアンサー
画像をボタンのようにフォーカス対象にする
- 画像をボタンのようにフォーカス対象にする方法についての質問です。
- 現在、画像にonclick，onmouseover，onmouseoutイベントを設け、ボタンとして機能を持たせていますが、キーボード操作だけでも押せるようにしたいです。
- 具体的には、Tabキーが押された時に移り変わるフォーカス対象の中に加え、Enterキーが押された時のイベントを設定したいです。どのようにすればよいでしょうか？
- wendy0303
- お礼率89% (81/91)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
なんか、もっと素直な作り方があると思いますけれど… （HTMLで用意されているものを、そのまま利用したほうが良いと思う） ＞１．Tabキーが押された時に移り変わるフォーカス対象の中に加える スクリプトで特殊制御するよりも、form部品を利用するほうが賢いと思われます。 （そうでないと、formの制御全体を作成することになりかねない） ＞２．Enterキーが押された時のイベントを設定する。 <input type=image>を利用してあげれば、Enterとclickが同じイベントで取得できるけれど、他のテキスト入力欄でEnterキーを押したときにsubmitの代表としてこの要素でイベントが発生したことになってしまうみたい。 これを区別するためにダミーでサブミットボタンを作ってみたところ、区別は可能になったが、非表示にしたとたんIEはそのボタンを無視してくれる。 しかたが無いので、keyイベントで識別。 これだとclickについてはまた別に制御する必要がある。（省略） （Enterキーでsubmitが発生するので、適当に制御する必要あり） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <script type="text/javascript"> <!-- function test(evt) { if (evt.keyCode != 13) return; var t = evt.target || evt.srcElement; if (t.nodeName == 'INPUT' && t.type == 'image') alert(t.name); return; } --> </script> </head> <body> <form action="" method="" onkeydown="test(event)"> <input type="text" name="i1" value=""> <p>LogIn: <input type="image" name="log_in" src="btn1.gif"> <p><input type="text" name="i2" value=""> <p>LogOut:<input type="image" name="log_out" src="btn2.gif"> </form> </body> </html>
お礼
fujillinさん、ありがとうございます。 >スクリプトで特殊制御するよりも、form部品を利用するほうが賢いと思われます。 ですよね。。（汗 ここは素直にボタンを <input type="button" onclick="..."> 等で書き直すようにします。 （何で前の人はボタンを全部画像にしたんだろう。。） >Enterキー押下時イベント サンプルつきの回答、ありがとうございます。 区別の部分は少々難しそうですが、 それだけにこの回答は理解の助けとなりそうです。 ありがとうございます。 解決後、再度返信します。