- 締切済み
フォーカス移動抑止について
お世話になっております。 ブラウザの画面項目(テキストボックス等)間でフォーカスを移動する場合、移動元でonblur、移動先でonfocusが発生しますが、移動元のonblurで、特定の条件の場合だけフォーカス移動を抑止し、移動先onfocusを発生させないようにしたいのですが、何か方法はないでしょうか? 【環境】 ・IE6 【現在うまくいっていない方法】 現在、フォーカス移動を抑止するため、移動元のonblur内の処理で、「event.srcElement.focus()」を実行してますが、移動先のonfocus()も走ってしまう。(2回フォーカス移動することで元の画面項目にフォーカスが戻る) 【補足】 ・問題になっているのは、画面項目の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> 長々と申し訳ありません。 よろしくお願いいたします。
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
あ~、ていせい。 </head>は、よけいだった。 すうちのちぇっくするのに、もじれつもとおることになっているけど、てきとうになおしてね ぜんかくくうはくははんかくにしてね。 まだIE6はひつようなのね。
- babu_baboo
- ベストアンサー率51% (268/525)
ふぉ~かすがはずれたら、ちぇっくして、えら~があったら、200みりびょうごに、そのようそにふぉーかすをもどしています <!DOCTYPE html> <title></title> </head> <body> <form action=""> <p> <input type="text" value="0" onblur="onElemBlur.call (this, event, check1)"> </form> <script> function check1 (str) { var result = null; var num; if (! isNaN (str)) { num = parseInt (str); if (num < 0 || 100 < num) result = '数値が範囲外です'; } return result; } function onElemBlur(event, checker) { var e = this; var val = e.value; var er = checker (val); if (er) { alert (er); setTimeout (function () { e.focus (); e.select ();}, 200); } } </script>