【最大10000ポイント】当たる!!質問投稿キャンペーン!

画像をボタンのようにフォーカス対象にする。

現在、画像に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ヶ月の初心者で、基本的な事を聞いてしまっているかもしれませんが
ご助力いただけましたら幸いです。

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 0
この回答へのお礼

fujillinさん、ありがとうございます。

>スクリプトで特殊制御するよりも、form部品を利用するほうが賢いと思われます。
ですよね。。(汗
ここは素直にボタンを
<input type="button" onclick="...">
等で書き直すようにします。
(何で前の人はボタンを全部画像にしたんだろう。。)

>Enterキー押下時イベント
サンプルつきの回答、ありがとうございます。
区別の部分は少々難しそうですが、
それだけにこの回答は理解の助けとなりそうです。

ありがとうございます。
解決後、再度返信します。

お礼日時:2010/04/02 14:19

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qimgボタンにfocusの当て方

<a href="#" onclick="javascript:on_pwche();"><img src="./img/ok.png" alt="OK"></a>

上記のボタンにフォーカスを当てたいのですが、
どうしたら良いのでしょうか?

宜しくお願いします。

---以 上---

Aベストアンサー

ボタンにフォーカスするというよりは、アンカーに
フォーカスするのではないですか?

たとえば読み込み時にa3というidのついたアンカーに
フォーカスするならonloadメソッドでやったらいいでしょう


<body onload="document.getElementById('a3').focus()">
<a href="#" onclick="javascript:alert(1);" id="a1"><img src="./img/ok.png" alt="OK"></a>
<a href="#" onclick="javascript:alert(2);" id="a2"><img src="./img/ok.png" alt="OK"></a>
<a href="#" onclick="javascript:alert(3);" id="a3"><img src="./img/ok.png" alt="OK"></a>
<a href="#" onclick="javascript:alert(4);" id="a4"><img src="./img/ok.png" alt="OK"></a>
</body>

ボタンにフォーカスするというよりは、アンカーに
フォーカスするのではないですか?

たとえば読み込み時にa3というidのついたアンカーに
フォーカスするならonloadメソッドでやったらいいでしょう


<body onload="document.getElementById('a3').focus()">
<a href="#" onclick="javascript:alert(1);" id="a1"><img src="./img/ok.png" alt="OK"></a>
<a href="#" onclick="javascript:alert(2);" id="a2"><img src="./img/ok.png" alt="OK"></a>
<a href="#" onclick="javascript:alert(3);" id="a...続きを読む

Qtabキーによるfocusの当たり方を制御したい

こんにちは,よろしくお願いします。
formが設置してあるページで,tabキーを押すとfocusが移動しますが,この挙動が,ブラウザによって違うことに気づきました。
ドリームウィーバーで,レコードの挿入ウィザードを使って簡単にフォームを設置することができますが,たとえば,この単純なページをInternet Explorerで開いて,1回tabキーを押してみると,focusは,ブラウザのアドレスバーに行ってしまいます。しかし,Firefoxでは,フォームの1番目のテキストボックスにfocusが当てられ一番最後にブラウザのアドレスバーなどに行きます。また,OperaではFirefoxと同様にフォームの1番目のテキストから始まって,ブラウザにはfocusが渡りません。
FirefoxやOperaのようにフォームの1番目の項目からfocusがあたるようにしたいのですが,どのようにすればよいのでしょうか?
gooやYahooを上記の3つのブラウザで開いてみると,必ず同じ挙動を示して,同じところからfocusが当たりますから,何らかの方法で制御する方法があるのだと思うのですが…。
tabindexを設定して,フォームの1番目の項目を1として,順に設定してみたりしたのですが,Internet Explorerでは,やはり一番先にブラウザにfocusが渡ってしまいました。
私の希望としては,Opera のように一切ブラウザにfocusが当たらないようにしたいのです。しかし,できないのであれば,Internet Explorerで一番最初にブラウザにfocusが当たらないようにする方法を教えていただきたいです。
当方,JavaScriptとPHPにてホームページを作成中です。よろしくお願いします。

こんにちは,よろしくお願いします。
formが設置してあるページで,tabキーを押すとfocusが移動しますが,この挙動が,ブラウザによって違うことに気づきました。
ドリームウィーバーで,レコードの挿入ウィザードを使って簡単にフォームを設置することができますが,たとえば,この単純なページをInternet Explorerで開いて,1回tabキーを押してみると,focusは,ブラウザのアドレスバーに行ってしまいます。しかし,Firefoxでは,フォームの1番目のテキストボックスにfocusが当てられ一番最後にブラウザのア...続きを読む

Aベストアンサー

ページ開いたときにtabindex=1のやつへフォーカスさせておくとか・・・

window.onload = function() {
document.getElementById('フォーカス先のID名').focus();
}

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

Qtabindex値の設定

tabindexの値を設定する方法を教えてください。

<input name='abc' id='abc' tabindex='xx' />

調べたら下記の方法でできると書いてありましたが、
上手くいきません。

document.getElementById('abc').tabindex='1';


以上、よろしくお願いします。

Aベストアンサー

× .tabindex
○ .tabIndex

<script>
window.onload=function(){
document.getElementById('a').tabIndex='3';
document.getElementById('b').tabIndex='2';
document.getElementById('c').tabIndex='1';
}
</script>

<input name='a' id='a' />
<input name='b' id='b' />
<input name='c' id='c' />

Qdiv要素内の全input要素をdisable

Javascriptで、あるdiv要素内のチェックボックスやテキストフィールドなどのinput要素を
すべてdisableにしたいです。
以下でうまくいきません。どなたかお知恵を頂けないでしょうか?
よろしくお願い致します。
var input_tags = document.getElementById("div_id").getElementsByTagName("input");

for(var input_tag in input_tags)
{
input_tag.disabled = true;
}

Aベストアンサー

var input_tags = document.getElementById("div_id").getElementsByTagName("input");

for(var i=0;i<input_tags.length;i++){
input_tags[i].disabled = true;
}

Qの意味を教えてください。

Javascriptを見ていると
<a href="#" onClick="new_open();return false">
なる記述がありますが、
この<a href="#"
の部分の意味を教えてください。
<a herf まではわかるのですが、この#はどのようないみなのでしょうか?

Aベストアンサー

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとページ最上部にジャンプしてしまいます。

このスクリプトを書いた人は onClick だけが必要だったのでしょうが、href がないとリンクの下線が出ないなどの不都合があるため、やむなく # を書いたのでしょう。

JavaScriptの内容を実行したいだけなら、
<a href="javascript:new_open()">
と書けば十分なのですが、一部のブラウザではこのタイプのリンクをクリックすると、アニメーションGIFが止まってしまうなどの弊害があるため、嫌う人もいるようです。

また、JavaScriptが有効でない環境の人は、質問に書かれたリンクをクリックしてもページ最上部に戻されるだけで、開くべきページの内容を見ることができません。
なので、
<a href="ページのURL" target="_blank" onClick="new_open(); return false">
とするなどして、非JavaScript環境にも対応した方が親切です。

長文失礼しました。

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとペー...続きを読む

QINPUTでデフォルト値(数値)をあらかじめセットしておきたい

INPUT時に入力BOXへ入力しますが、ここにあらかじめ数値をセットしておきたいと思います。
どのようにするのでしょうか?
通常だと空白なので、そこに手で「123」のように入力しないとだめなのですが、あらかじめ「123」を入れておいて入力の簡便化を図りたいと思います。
よろしくお願いいたします。

Aベストアンサー

# 状況の説明を適切にしましょう
> tokcodeという項目名に「123」が入っている場合に項目名で指定する方法がわかりません。

クライアントスクリプトで処理する事お望みですか?
それとも サーバーサイドの動的な変更をお望みなのでしょうか

それにより処理法方が異なります

クライアントサイドならVBScriptやJavaScriptを記述して希望するイベント条件でエレメントを特定しデータを取得、更新します

たとえば ページが完成した場合なら bodyタグ(またはWindow)のonloadイベントで処理します
< script type="text/javascript" >
function myLoad()
{
  var objSrc, objTrg;
  objSrc = document.getElementById("tockcode");
  objTrg = document.getelementById("txt1");
  if ( ( objSrc != "undefined" ) && (objTrg != "undefined" ) ){
    objTrg.value = objSrc.value;
  }
}
window.onload = myLoad;
</scriipt>
といった具合になります

サーバーサイドの場合 tockcodeの詳細が不明なので …
<%
dim sTockCodeValue
sTockCodeValue = サーバサイドでtockcodeからデータを取得
%>
<input type="text" id="txt1" value="<%= sTockCodeValue %>">
といった記述でしょう

# 状況の説明を適切にしましょう
> tokcodeという項目名に「123」が入っている場合に項目名で指定する方法がわかりません。

クライアントスクリプトで処理する事お望みですか?
それとも サーバーサイドの動的な変更をお望みなのでしょうか

それにより処理法方が異なります

クライアントサイドならVBScriptやJavaScriptを記述して希望するイベント条件でエレメントを特定しデータを取得、更新します

たとえば ページが完成した場合なら bodyタグ(またはWindow)のonloadイベントで処理します
< sc...続きを読む

Q白い部分を透明にすることは可能ですか?

ペイントで白い部分を透明にすることは可能ですか?
やり方を教えてください。
ペイントじゃできないのかも教えてください。

Aベストアンサー

 残念ながらペイントでは、まわりが、白いままです。
 
 お使いのパソコンのOSが、一致するようでしたら
 
 無料のソフト「GIMP」(ギンプ)を使用することをおすすめします。

 ・Gimp2のダウンロードページ
 http://www.geocities.jp/gimproject2/download/gimp-download.html


 ・GIMP(ギンプ)の使い方
透過(透明な部分を作る技法)
 保存は、gifかpngの拡張子にして下さい

  http://www.geocities.jp/gimpmanual/manual.html

 ※jpgは、写真を構成するのが、目的な拡張子ですので
   まわりが、白くなり透明には、なりません。

Qで文字を右揃えにしたいのですが...(^-^;

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね?
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど;

HPタイトル   管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです;<DIV>だと改行されてしまうし...

Aベストアンサー

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー...続きを読む

Qのイベントについて

<input type="file">でファイルを選択した時点にイベントを追加する方法を教えてもらえませんか?
セキュリティの観点から無理なのでしょうか?

Aベストアンサー

ファイルを選択した時点で、
onchange イベントが起こりますので、
それを利用すればいいです。
例:
<form name="File">
<input type="file" name="UPLOADFILE" onchange="alert(document.File.UPLOADFILE.value)">
</form>


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング