• ベストアンサー

bodyタグのfocus

jqueryで $('body').focus(function() { alert('focus'); }); などと記述しても、フォーカス時にうまくアラートが表示されません。 Bodyタグにonfocusとして直接書くと動作するのですが、何か違いがあるのでしょうか？ よろしくお願いします。

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

  • ベストアンサー
回答No.5

http://dev.w3.org/html5/spec/sections.html#the-body-element HTML5の方を読むと、 『window.onfocusはHTMLタグとして書けないから、<body onfocus="">で書いてちょ。ブラウザはwindowに置き換えてちょ。』 ということのようですね。 HTMLとJavaScriptの関係では、document.body.onfocusは<body onfocus="">と同等なのでwindowにマッピングされるのかもしれませんが、 addEventListenerによるイベントリスナーの登録は別物なので、 文字通り<body>にフォーカスが当たらなければonfocusイベントが呼び出されないと思います。 jQueryは全面的にaddEventListener/attachEventを使っていると思いますので、 jQueryを使うと、結果的にbodyに登録されたイベントリスナーが呼び出されなくなると思います。 デフォルトでフォーカスが当たる要素は下のページにあるように<a>や<input>などです。 <body>にフォーカスを当てる方法としてNo.3とおりtabindexが使えるようです。 http://dev.w3.org/html5/spec/editing.html#specially-focusable >An element is specially focusable if the tabindex attribute's definition above defines the element to be focusable.

その他の回答 (4)

  • Chaire
  • ベストアンサー率60% (79/130)
回答No.4

ごめんなさい、寝ぼけてすごく的外れなことを書きました。No.3 は全面撤回します。jQuery に問題はなく、No.2 が正しいです。 body は（そのままでは）キーボードフォーカスの対象になりませんので、body で focus を監視してもイベントリスナに通知されません。body でキーボードフォーカスを拾えるようにするには <body tabindex="0"> のように 0 以上の tabindex を付加します。 しかし、それはウィンドウ全体のフォーカスではありません。もしウィンドウのフォーカスを拾いたければ、No.2 が仰るように window を監視します。 失礼しました。

  • Chaire
  • ベストアンサー率60% (79/130)
回答No.3

jQuery 1.6.1 を追跡すれば分かりますが、本来内部的に document.addEventListener('focus', handler, true); // キャプチャリング document.attachEvent('onfocusin', handler); // イベント名は "focusin" のように修正されるべき所がスルーされて、"focus" のバブリングのまま登録されているからです。修正コードは jQuery に含まれているはずですが、それが実行されないバグなのか、何か他の手順が必要なのか、jQuery のリファレンスないしバグトラッカーなどで確認して下さい（私は追いかける気はないので）。 --- なお、body の onfocus は DOM3 Events および HTML5 に収録されています。この部分は主要ブラウザ間の仕様調整にもとづく後づけ規定なので、今のブラウザでも動くと考えて構いません。 それと、言うまでもありませんが一応。body（もしくは window）の focus イベントで alert() すると無限ループになる可能性があるので、十分注意して下さい。

回答No.2

http://www.w3.org/TR/html4/interact/scripts.html#events <body onfocus="">はHTMLやDOMとして定義されていませんので、ブラウザ依存になるはずです。 window.onfocus、window.onloadなどで処理した方が確実だと思います。

  • public_sa
  • ベストアンサー率52% (13/25)
回答No.1

jquery使ったことないけど、 $('body').onfocus = function () {alert('focus');} じゃぁないのかい？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • body onblur focusについて

    Bodyタグ内の「onblur='focus();'」のON／OFFを、 下記のコードで取りあえず動作しているのですが、 プログラマーではないので、今ひとつピンときません。 もっとスマートにならないでしょうか？ 教えてください。　お願いします。 <html> <head> <script> var flag = 0; function aaa(){ if(flag < 1){ document.getElementsByTagName('body')[0].onblur=''; flag++; }else{ window.location.reload(); flag = 0; } } </script> </head> <body onblur='focus();'> <p><input type='button' value='on/off' onclick='aaa();'></p> </body> </html>

  • innerHTMLが動作しない。

    JavaScriptをHTMLファイルに記述した場合、最初にfunctionスコープ内の動作以外は全て行なわれますよね。例えば、 <script type="text/javascript"> <!-- alert("test"); //--> </script> と書いた場合、ページの表示と同時にアラートが出ます。しかし上のalertの部分をdocument.getElementById("test").innerHTML = "test";にすると、これが実行されないのです。もちろん<div id="test"></div>タグはちゃんとbodyタグ内に記述してあります。functionを定義してbody onLoadで呼び出す方法もありますが、できればfunctionをむやみに使いたくないので、先のalertの時のように動作させたいのです。 これが動作しない原因は何なのでしょうか？

  • フォーカスが外れたときの動作について

    お世話になります。 あるテキストフィールド(text1)をクリックした際に隠れている別のテキストフィールド(text2)を表示し、 フォーカスが外れるとtext2を再度隠すというコードを書きました。 <html> <head> <style> <!-- #text2 { display: none; } --> </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function() { $("#text1").click(function() { $("#text2").show(); }).blur(function() { $("#text2").hide(); }); }); --> </script> </head> <body> <form> <input type="text" id="text1" value=""/> <input type="text" id="text2" value=""/> </form> </body> </html> この場合、text1をクリックしたときにtext2が表示されて、フォーカスが外れるとtext2が隠れるのは想定通りの動作なのですが、これをtext2をクリックした場合にはtext1からフォーカスが外れてもtext2を表示したままということはできるのでしょうか。 blurの中でtext2がクリックされた時みたいな検知ができれば実現できると思うのですがそのようなことってできますでしょうか。 よろしくお願いいたします。

  • フォーカス移動抑止について

    お世話になっております。 ブラウザの画面項目（テキストボックス等）間でフォーカスを移動する場合、移動元でonblur、移動先でonfocusが発生しますが、移動元のonblurで、特定の条件の場合だけフォーカス移動を抑止し、移動先onfocusを発生させないようにしたいのですが、何か方法はないでしょうか？ 【環境】 ・IE6 【現在うまくいっていない方法】 現在、フォーカス移動を抑止するため、移動元のonblur内の処理で、「event.srcElement.focus()」を実行してますが、移動先のonfocus()も走ってしまう。（２回フォーカス移動することで元の画面項目にフォーカスが戻る） 【補足】 ・問題になっているのは、画面項目のonblur、onfocusで入力値のチェックや他画面項目との連動、色変更、エラーメッセージ表示等を行っておりonblurやonfocusが何度も走ってしまうと想定外の動きをしてしまいます。（場合によってはフォーカス移動の無限ループ） ・グローバル変数を屈指すれば想定外の動きをしないようにすることはできるかと思いますが、それ以外の方法で制御したい。 【現在うまくいっていない方法の動作確認用のとりあえず作ったサンプルプログラム】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>フォーカス遷移抑止検証</title> <script type="text/javascript"> var iEventCount = 0; function onElemBlur() { if (++iEventCount > 10) return true;// 無限ループ抑止用 debug("blur : " + event.srcElement.value); event.srcElement.focus(); } function onElemFocus() { if (++iEventCount > 10) return true;// 無限ループ抑止用 debug("focus : " + event.srcElement.value); } function debug(msg) { var obElem = document.getElementById("debugmsg"); obElem.innerHTML += msg + "<br/>"; } </script> </head> <body> <input type="text" value="hoge1" onblur="onElemBlur()" onfocus="onElemFocus()" /> <br/> <input type="text" value="hoge2" onblur="onElemBlur()" onfocus="onElemFocus()" /> <br/> <br/> <br/> <span id="debugmsg" rows="10" cols="50" ></span> <br/> </body> </html> 長々と申し訳ありません。 よろしくお願いいたします。

  • BODYタグのonloadについて

    こんにちは。 HTMLのBodyタグにて、onload処理を記述しているのですが、 不思議な現象が起きます。。。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script language="JavaScript" type="text/JavaScript"> <!-- // 初期表示 function init() { alert("AAA"); var formObj = document.getElementById("starter"); alert("formObj.action = " + formObj.action); formObj.submit(); } //--> </script> </head> <body onload="init()" tabindex="-1"> Now Loading... <form method="post" name="starter" action="/getIchiran.do" > <% System.out.println("このJSPにきてますか？"); %> </form> </body> </html> 上記のように記述しているのですが、 onloadのinit関数が、呼ばれる場合と呼ばれない場合があります・・・ 呼ばれる場合と、呼ばれない場合でも 「このJSPにきてますか？」のログは表示されているので、このHTML（JSP）は呼ばれている模様です。 どうしてこうのような現象が起きるのかさっぱり分からなくて・・・ 何が悪いのか教えて頂けないでしょうか？ 宜しくお願い致します。 IEは6.0、 OSはWindowsXPです。

    • ベストアンサー
    • HTML
  • JavaScriptでフォームへのフォーカス処理

    PHP、XHTML、CSSで応募フォームの作成をしております。 PHPとHTMLは別ファイルで作成しており、PHPにアクセスしてそのPHPが指定されたテンプレートを読みにいくような流れとなっております。 HTMLもPHPも完成して、応募フォームとして一通り動くようになったのですが、新たにフォーカス機能を追加したいということになりました。 具体的には、応募フォームの一番最初のテキストエリアに、ページ読み込み時にフォーカスを当てたいという内容です。 そこで、フォーカス機能用のJavaScriptを別ファイルで新たに作成し、動きを確認してみたところ上手く動きません。 HTMLとJavaScriptのソースは下記の通りです。 ==================================================================== ■HTML(全て書くと長くなってしまうので、簡略させていただきます) <script type="text/javascript" src="$path_top_js/focus.js"></script> <body onLoad="Focus()"> </head> <form name="top" action="index.php" method="POST" onReset="return false;" onSubmit="return false;"> <input type="hidden" name="USER_ID" value="$USER_ID"> <INPUT size="20" type="text" name="USER_ID" value="$USER_ID" MAXLENGTH="10"> </form> </body> ■JavaScript(focus.js) function Focus(){ document.top.USER_ID.focus(); } ==================================================================== 「フォームのname="USER_ID"というテキストエリアにフォーカスを当てる」という内容になります。 なぜフォーカスが当たらないのか、原因は予想がつくのですが、どう解決していいのか分かりません。 多分、フォームの値を保持するために記述しているhiddenタグ <input type="hidden" name="USER_ID" value="$USER_ID"> にJavaScriptのフォーカスが当たってしまっているみたいです。(フォーカスが当たっていると思われるhiddenタグは見ることができません) 試しにhiddenタグを外してみたところ、JavaScriptで指定したテキストエリアにフォーカスが当たっていることを確認しました。 「応募フォーム」ということで、ページ遷移した際にもフォームに入力した値を保持しておくためにhiddenタグは外したくないのですが、フォーカス機能もちゃんと動くようにしたいと思っております。 解決方法が分かる方いらっしゃいましたら、ご教授の程お願い致します。

    • ベストアンサー
    • HTML
  • jQueryでloadしたページ内でもjQueryを使う方法

    例えば、base.html内にjQueryでadd.htmlをloadします。 base.htmlに下記コードを記述 $(document).ready(function(){ 　$("a").click(function(){ 　　alert("click"); 　　return false; 　}); }); base.htmlに直接記述したaタグではアラートが出ますが、 base.htmlに読み込んだadd.html内のaタグでは適用されません。 Ajaxで読み込んだページ内にもjQueryを使用したい場合には、 どのようにすればよいのでしょうか？

  • フォーカスする際のテキストフィールド名を変数で渡したい

    表のような入力フォームがあって、submitした際にあるプログラムが走り、HTML本体を再読み込みしています。 画面が表示されたときに、テキストフィールドにあらかじめフォーカスを合わせるには、以下のOnloadとfocus()を使いますよね？ <body onLoad="document.Form.Field.focus()"> で、再読み込み時には、次の入力用テキストフィールドへフォーカスを合わせたいのですが、どうすればいいでしょうか？ 例えば A1 A2 A3 というとき、A1を入力後、後ろでプログラムが走り、再読み込みして画面が再表示されたときに、A2にフォーカスがうつっている、という感じです。通常の書き方だとBodyにはひとつか(A1しか)かけないので・・・変数を使ったらどうかと思ってやってみましたがうまくいきません。 <SCRIPT LANGUAGE="JavaScript"> <!-- var f; f = "A1"; window.alert(f); //--> </SCRIPT> <body onLoad="document.Form.(f).focus()"> 又は <body onLoad="document.Form.var(f).focus()"> <body onLoad="document.Form.f.focus()"> フィールドにindextabをしてみましたがダメでした。又A1にonBlurが入っております。 そもそも変数なんて使えるのでしょうか？ 変数以外の方法でも、他にアイディアがあればお願いします。 締切りが明日で非常にあせっています。 よろしくお願いいたします。

  • bodyタグの範囲について

    bodyタグの範囲について 質問させてください。 HTMLとJavaScirptで下記のようなソースを書きました。 ～ここから～ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <script language="JavaScript"> function foo(){ <!-- alert("ほげ"); // --> } </script> </head> <body onClick="foo()"> <input type="text"> </body> </html> ～ここまで～ この場合、ウィンドウの中で<BODY>タグが担当する範囲は以下のどちらでしょうか？ 1. テキストボックスのみ(余白を含まない) 2. 余白を含んだウィンドウ全体 私としては、関数foo()が実行されるのはテキストボックス内をクリックした場合だけなので、1.だと思います。 しかし、<body>タグの属性のbgcolorをつけると、余白全てが着色されるので、2.なのかもしれないと思い混乱しています。 どなたかお知恵をお貸しください。

    • ベストアンサー
    • HTML
  • focus()が上手くいかない

    困っています、助けてください。 フォームのテキストボックスの入力された文字数をチェックし、 サイズオーバーなら、アラートを表示し、テキストボックスにフォーカスを移動させたい。 のですが、上手く動いてくれません。 コードは次の通りです。どこがおかしいのか？どうすれば改善できるのか？　教えてください。 <form method="post" action="#"> <input type="text" name="fmTitle" onBlur="checkText(this)"> </form> <script type="text/javascript"> <!-- function checkText(aText) { if (aText.value.length > 100) { alert('サイズオーバーです'); aText.focus(); } } //--> </script>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する