0
私はウェブデザインに関するオンライン精神実験のプログラムを作成しています。 （下のコードを参照してください） 私がしようとしているのは、ユーザーがいくつかの入力ボックスをクリックするとonFocusイベントが呼び出され、ページがその場所にジャンプします（つまり、ボックスがページの上部に表示されます）。ボックスにはアウトラインに何らかの影響があり、フォーカスがあることを示します。
これは、location.hash、anchor、およびstyle.outlineを使用して実装できます。Firefoxでlocation.hashの後にスタイル効果が残るのはなぜですか？
しかし、Firefoxでは、アンカーポイントにページがジャンプすると、アウトラインスタイルを削除するイベントonBlurがあるにもかかわらず、アウトラインスタイルがそこに残ります。 これがなぜ起こり、それを修正するのか誰にも分かりますか？ この問題のほとんどの関連する関数は、コード内にjump（）とnoeffect（）です。
これはChromeとSafariでは動作しますが、Firefoxでは動作しません。 （IEは機能していません。IEはアウトラインスタイルも全く表示しません。IEでの修正方法を知っていれば教えてください） 私のプログラムはすべての主要なブラウザで使用されることをお勧めします。
ありがとうございます！
---------コード-----------
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" >
function loadings() {
var bcolor = "#000000 ";
var bstyle = "solid ";
var bthick = "2px ";
document.getElementById("one").innerHTML = "<div>UserID:</div><div><input style='width: 80px; border: "+bthick+bstyle+bcolor+";' id='us' name='us' type='text' /></div>";
document.getElementById("two").innerHTML = "<div>password:</div><div><input style='width: 80px; border: "+bthick+bstyle+bcolor+";' id='pw' name='pw' onfocus='jump(\"one\", \"pw\");' onBlur='noeffect(\"pw\")'; type='password' /></div>";
document.getElementById('us').focus();
}
function jump(str, id){
location.hash = str;
document.getElementById(id).style.outline = "red solid 2px";
//settimeout(noeffect(id), 1000);
}
function noeffect(id){
document.getElementById("pw").style.outline = "green solid 5px";
}
</script>
<style type="text/css">
input:focus {outline: orange solid 2px;}
</style>
</head>
<body onload = "loadings();">
<p>
click password box. Then it will jump to #pw (or somewhere else is fine), <br/>
and focus is on password box (some effect will happen on outline). <br/>
If you click userID box, I want effect to disappear, but it remains. How should I fix?
</p>
<table border="1">
<tbody>
<tr>
<td style="vertical-align:top;"><div id="one"> </div></td>
<td style="text-align: right; vertical-align:top;"><div id="two"></div></td>
</tr>
<tr>
<td style="vertical-align:bottom;"><div id="three"></div></td>
<td style="text-align: right; vertical-align:bottom;"><div id="four"></div></td>
</tr>
</tbody>
</table>
</body>
</html>
ライブデモを提供できますか？ –
http://jsfiddle.net/Mutant_Tractor/3T6ry/ - デモ –