Firefoxで入力値のチェック

解決済

質問者：kztk
質問日時：2006/03/17 18:19
回答数：1件

テキストボックスへの入力値を即時でチェックし、値が不正だった場合はそのテキストボックスから抜けれないようにしたいと考えています。
以下のコードはIE6、Opera8.5では動作しましたが、Firefox1.5ではalertとselectはされるものの、focusがされず、結果テキストボックスから抜けてしまいます。
Firefoxで上記のことをするにはどうしたらよいのでしょうか。
<html>
<head>
<script type="text/javascript">
function validate(e){
var t = document.getElementById("txt1");
if(t.value == "a"){
alert("だめ！！");
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
t.select();
t.focus();
return false;
}
}
function bodyOnLoad(){
var t = document.getElementById("txt1");
addListener(t, "change", validate, false);
}
function addListener(e, evtname, func, foo){
if(e.addEventListener){
e.addEventListener(evtname, func, foo);
}else if(e.attachEvent){
e.attachEvent("on" + evtname, func);
}
}

</script>
</head>
<body onload="bodyOnLoad();">
<input type="text" id="txt1">
<input type="text" id="txt2">
</body>
</html>

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yambejp
回答日時：2006/03/17 21:04

なんかずいぶん仰々しいコードですが、

onblurの制御だけでじゅうぶんでは？
ちなみにテストしてみたところfirefoxは
focusがほかに移る処理が他のブラウザと
異なるようで、一度別対象を必ずフォーカス
しないといけないみたいですね。
バグなのか仕様なのかわかりません。

姑息ですが、settimeoutを使うと解消できそうです
以下のソースでどうでしょうか？

<html>
<head>
<script type="text/javascript">
function bodyOnLoad(){
t1 = document.getElementById("txt1");
t1.onblur=function(){
if(t1.value == "a"){
alert("ダメ")
setTimeout("t1.focus()",0);
}
}
}
</script>
</head>
<body onload="bodyOnLoad()">
<input type="text" id="txt1">
<input type="text" id="txt2">
</form>
</body>
</html>

この回答への補足

ご回答ありがとうございます。setTimeoutで何とかなりそうですのでもう少しテストしています。
ちなみに説明不足でしたが「仰々しい」のにもそれなりの理由がありまして・・・。
作ろうとしているのは汎用的なスクリプト部品で、提示したのは問題の箇所を単純化して抽出したコードです。汎用部品ですから、"onblur=..."を使ってしまうと、部品を使う側で異なるイベントハンドラを定義できなくなります。
その点リスナーならば他のリスナーを追加することも、onXXを使うこともできますのでずっと柔軟です。
<html>
<head>
<script type="text/javascript">
function validate(e){
var t = document.getElementById("txt1");
if(t.value == "a"){
alert("だめ！！");
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
t.select();
setTimeout(function(){t.focus()}, 0);
return false;
}
}
function bodyOnLoad(){
var t = document.getElementById("txt1");
addListener(t, "blur", validate, false);
}
function addListener(e, evtname, func, foo){
if(e.addEventListener){
e.addEventListener(evtname, func, foo);
}else if(e.attachEvent){
e.attachEvent("on" + evtname, func);
}
}

</script>
</head>
<body onload="bodyOnLoad();">
<input type="text" id="txt1" onblur="alert('ユーザー定義の処理');">
<input type="text" id="txt2">
</body>
</html>