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

締切済

質問者：estmo
質問日時：2011/05/29 01:09
回答数：2件

お世話になっております。

ブラウザの画面項目（テキストボックス等）間でフォーカスを移動する場合、移動元で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>

長々と申し訳ありません。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： babu_baboo
回答日時：2011/05/29 08:39

あ～、ていせい。

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

まだIE6はひつようなのね。

- 0
- 件

通報する

No.1

回答者： babu_baboo
回答日時：2011/05/29 08:11

ふぉ～かすがはずれたら、ちぇっくして、えら～があったら、２００みりびょうごに、そのようそにふぉーかすをもどしています

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