画像をボタンのようにフォーカス対象にする。
現在、画像にonclick,onmouseover,onmouseoutイベントを設け、
ボタンとして機能を持たせて、html画面を作成しております。
htmlソース
<IMG id="logout_btn" onmouseover="Onmouseoverlogout();"
onmouseout="Onmouseoutlogout();"
onclick="clicklogout();"
img src="images/logout.gif"
width="100" height="27" border="0" name="logout_btn">
これを、キーボード操作だけでも押せるようにしたいのです。
この目的を果たす為には、
1.Tabキーが押された時に移り変わるフォーカス対象の中に加える
(画面の中には他に幾つかのテキストボックスやコンボボックスがあります)
2.Enterキーが押された時のイベントを設定する。
この2項目を実現する為にはどうすればよいのでしょう?
特に2は、Enterキーを押した時にフォーカス状態にある対象を判別する
⇒それによって実行する関数を選ぶif分岐を作る、といった手順が必要かなと想像しています。
(フォーカスされている画像が、「ログイン」ボタンだったらSubmit関数を呼び、
「リセット」ボタンだったら全項目をブランクにするコードを走らせる、等…)
フォーカス対象、などのキーワードで検索しても別の事例が検索できてしまい
なかなか解決できません。
Web製作1ヶ月の初心者で、基本的な事を聞いてしまっているかもしれませんが
ご助力いただけましたら幸いです。
No.1ベストアンサー
- 回答日時:
なんか、もっと素直な作り方があると思いますけれど…
(HTMLで用意されているものを、そのまま利用したほうが良いと思う)
>1.Tabキーが押された時に移り変わるフォーカス対象の中に加える
スクリプトで特殊制御するよりも、form部品を利用するほうが賢いと思われます。
(そうでないと、formの制御全体を作成することになりかねない)
>2.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キー押下時イベント
サンプルつきの回答、ありがとうございます。
区別の部分は少々難しそうですが、
それだけにこの回答は理解の助けとなりそうです。
ありがとうございます。
解決後、再度返信します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- Excel(エクセル) 【Excel】指定のセル内容を基に別シートのセルを検索して選択する【VBA】 1 2022/06/16 16:16
- マウス・キーボード キーボード設定で困っています。長文です。 2 2022/12/10 12:44
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jsで診断コンテンツのページ内切り替えについて 1 2023/04/14 17:31
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- その他(プログラミング・Web制作) uwscとWinShotを使いスクリーンショットを撮る 1 2022/06/30 21:15
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックスで、チェック...
-
Mac(Safari)でのSendkyesコマン...
-
同じ名前が複数あるインプット...
-
inputタグのtype値がfileの場合...
-
<SELECT>タグでの selected 状...
-
セレクトボックスの幅をプルダ...
-
inputタグのclass名にコロン「:...
-
javaScriptで検索結果の保持
-
プルダウンメニュー項目のフォ...
-
formタグのactionパラメータで...
-
フォームに表示される文字を右...
-
ランダムリンクでリンク先を別...
-
複数のプルダウンからリンクす...
-
プルダウン 背景色の変更
-
javascriptでプルダウンメニュ...
-
inputtype=hiddenとは?
-
htmlソースの書き換え
-
<a href=**?***=***>をGET方式で
-
「リセット」ボタンを「画像」...
-
送信ボタンで飛ばす方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
親ページからインラインフレー...
-
入力フォームの javascript で ...
-
画像をボタンのようにフォーカ...
-
JavaScript の 「showDialog」
-
[onClick]ボタンを押すことで入...
-
パスワードをIPする際見えな...
-
submit時に違うページに飛びたい
-
確認ダイアログ表示後、他のペ...
-
a.href の href を有効か無効に...
-
submitをボタン以外にするには
-
1アクションでPOST・GET、両方...
-
送信ボタン押下時に値が未入力...
-
複数のフォームを一括で送信す...
-
URL パラメータを使ってフォー...
-
【html】)パスワード認証フォー...
-
HTMLのoptionタグ部分に画像を...
-
フォーム要素以外にもname属性...
-
リンクをクリックした時にform...
-
1つのformで複数のactionを実...
-
GETをPOSTに変更したところ 送...
おすすめ情報