0

ウェブデザインでオンライン心理実験用のプログラムを作成しています。(以下のコードを参照してください) 私がやろうとしているのは、ユーザーが入力ボックスをクリックすると onFocus イベントが呼び出され、ページがその場所にジャンプする (つまり、ボックスがページの上部に来る) ことです。ボックスは、フォーカスがあることを示すために、そのアウトラインに何らかの影響を与えます。
location.hash、anchor、style.outline を使用して実装できます。

ただし、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>
4

1 に答える 1

0

"#one"これで問題が解決するかどうかはわかりませんが、通常、location.hash には # 記号が含まれているため、.hashの代わりに割り当てる必要があると思います"one"。

また、Firefox では、onhashchange イベントを使用して、ジャンプするときにスタイルを変更するオプションがあります。https://developer.mozilla.org/en/DOM/window.onhashchange

于 2011-02-07T18:36:30.650 に答える