• 締切済み

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

お世話になっております。 ブラウザの画面項目(テキストボックス等)間でフォーカスを移動する場合、移動元で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> 長々と申し訳ありません。 よろしくお願いいたします。

  • estmo
  • お礼率36% (4/11)

みんなの回答

回答No.2

あ~、ていせい。 </head>は、よけいだった。 すうちのちぇっくするのに、もじれつもとおることになっているけど、てきとうになおしてね ぜんかくくうはくははんかくにしてね。 まだIE6はひつようなのね。

回答No.1

ふぉ~かすがはずれたら、ちぇっくして、えら~があったら、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>

関連するQ&A

  • フォーカス移動のタイミング

    <html> <head> <script type="text/javascript"> <!-- function getelementid(event){ try { return event.srcElement.id; } catch ( e ) { return event.target.id; } } function lostfocus(event){ elem_id = getelementid(event); elemid = elem_id.replace("1","2"); document.getElementById(elemid).style.visibility = "hidden"; } function tuikabuttonhyouji(event){ elem_id = getelementid(event); document.getElementById(elem_id).style.visibility = "visible"; } function tuikabutton(event){ elem_id = getelementid(event); elemid = elem_id.replace("1","2"); document.getElementById(elemid).style.visibility = "visible"; } --> </script> </head> <body> <textarea rows="1" id="test1" onblur="lostfocus(event);" onDblClick="tuikabutton(event);"></textarea> <input id="test2" style="visibility: hidden;" type="button" value="click" onFocus="tuikabuttonhyouji(event);"> </body> </html> 実装したい機能を部分的に抜き出した部分のソースが上の部分です。 実装したい機能しては、 ・テキストエリアをダブルクリックしたらclickボタンを表示 ・テキストリアからフォーカスが外れたらclickボタンを非表示にする ・ただし、フォーカスの移動先がclickボタンなら非表示にしない なので上記のように書いてみたのですがうまくいきません。 何かいい案がありましたらよろしくお願いします。

  • 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>

  • textbox内の文字数を判別しfocusを移動させる

    textbox内の文字数を判別しfocusを移動させるプログラムを書いたのですが、2つ目のtextboxから記入したりするとうまく動作しません。どうしたらいいのでしょうか?カーソルがどのtextboxにあるか(どのtextboxにfocusしているか)を参照しようとしたのですがそのような関数はあるのでしょうか?教えてください。 <html> <head><title>checkLength</title> <script language="JavaScript"> <!-- document.onkeyup=checkLength; function checkLength() { if(document.form1.text1.value.length==3) document.form1.text2.focus(); if(document.form1.text2.value.length==5) document.form1.text3.focus(); } //--> </script> </head> <body bgcolor="#ffffff"> <form name="form1">半角英数で入力してください。<br> 1...<input type="text" name="text1" size="7"> 3文字入力するとカーソル移動<br> 2...<input type="text" name="text2" size="7"> 5文字入力するとカーソル移動<br> 3...<input type="text" name="text3" size="7"> </form> </body> </html>

  • input textでペーストした瞬間フォーカス移動

    input type="textが縦にたくさんあり、 text1[n番目]に文字をペーストするのですが ペーストした瞬間フォーカスをtext1[n]からtext1[n+1]に移動したいのですがonChangeだとうまくペーストした瞬間に移動できません。 良い方法はあるでしょうか。 <input type="text" size="21" value="" name="text1"><br> <input type="text" size="21" value="" name="text1"><br> ・ ・ ・

  • FireFoxでfocus()が上手く動かない

    javascriptを使って、 フォームのテキストエリアの入力文字数をチェックし、 オーバーしていれば、アラートを出し、テキストエリアにフォーカスを移動させる。 ようにしようとしています。 IEでは動いてのですが、FireFoxだと上手くフォーカスが移動してくれません。 どこがまずいのか、教えてください。 コード <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function checkText(aText) { if (aText.value.length > 1) { alert('サイズオーバーです'); aText.focus(); } } //--> </script> </head> <body> <form method="post" action="#"> <input type="text" name="fmTitle" onBlur="checkText(this)"> <input type="text" name="dummy"> </form> </body> </html>

  • ASP.Net Enterキーで移動したいイベント

    大変お世話になっております。 Windowsフォームでの動作のようにASP.Net でも Enterキーにて次項目に移動したいと思い、いろいろと調べてみました。 <script language="javascript" type="text/javascript">   function ChgKeyCode() {     if (!(event.srcElement.type == "button" || event.srcElement.type == "submit")) {       if (event.keyCode == 13) {         event.keyCode = 9;       }     }   } </script> 上記スクリプトにて、EnterキーのコードをTabキーに変換してEnterでも次項目に移動できるようにしたのですが、これですと、TextBox にTextChangedイベントがあった場合にイベントが無視されてしまうのですが、どうすればよいでしょうか? Enterキーで次項目に移動しつつ、イベントも適応したいのですが、お知恵を拝借できればと存じます。 何卒よろしくお願いいたします。

  • Accessの更新後処理で特定の条件を満たしている場合、フォーカスを移動させない方法

    テキストボックスの更新後処理で下記のような記述をし、 テキストボックスに1が入力された場合、エラーメッセージを表示した上で、 フォーカスを一度ボタンに移動した後、テキストボックスに移動しております。 SetFocusを二回記述している理由ですが、 フォーカス移動を抑止する為に、Me.テキストボックス.SetFocus のみを記述した所、次の場所にフォーカスが移動してしまい、 下記のように書くと元の場所にフォーカスが戻ってくる為です。 フォーカス喪失時(Exit)の場合、Cancelを使用すればフォーカスの移動を抑止できたのですが、 更新後処理(AfterUpdate)でSetFocusを2回書く以外に フォーカスを移動させない方法をご存知の方がいらっしゃいましたら アドバイスいただければと思います。 ★クラスモジュール Private Sub テキストボックス_AfterUpdate() Call CHECK_TEXT(Me, Me.テキストボックス.Value) End Sub ★標準モジュール Function CHECK_TEXT(MeForm As Form, text As String) If text = 1 Then MsgBox "エラー" MeForm.ボタン.SetFocus MeForm.テキストボックス.SetFocus End If End Function 以上、よろしくお願いします。

  • イベント発生順序

    いつもお世話になっています。 JavaScriptの発生順序を制御する方法はありますでしょうか? 例えば、あるテキストボックスがあって、 A1→B2とフォーカスが移るときのイベントですが、 B2.onFocus→A2.onBlurの順番でイベントが発生していますが、これを A2.onBlur→B2.onFocusとしたいです。 IE限定でいいので、よろしくお願いします。

  • Enterで指定のテキストボックスにフォーカスを・・・

    Enterを押すと指定のテキストボックスにフォーカスを移動させたいのですがやり方がわかりません・・・。 例えば以下の様なフォームで TB1→TB2→TB3→TB5→TB6 という具合に移動させたいです。 どうか皆さんのお知恵をお貸しください。 <form name = "textbox"> <input type = "text" name="TB0" onFocus="this.blur()"> <input type = "text" name="TB1"> <input type = "text" name="TB2"> <input type = "text" name="TB3"><br> <input type = "text" name="TB4"onFocus="this.blur()"> <input type = "text" name="TB5"> <input type = "text" name="TB6"> </form>

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

    お世話になります。 あるテキストフィールド(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がクリックされた時みたいな検知ができれば実現できると思うのですがそのようなことってできますでしょうか。 よろしくお願いいたします。

専門家に質問してみよう