0

我正在为网页设计的在线心理实验创建一个程序。（请看下面的代码）我想要做的是，如果用户点击某个输入框，它会调用 onFocus 事件，然后页面跳转到那个地方（即框来到页面顶部），并且box 对其轮廓有一些影响，表明它具有焦点。
我可以使用 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

我不确定这是否能解决您的问题，但 location.hash 通常包含 # 符号，所以我认为您应该分配它"#one"而不是"one".

此外，在 Firefox 中，您可以选择在跳转时使用 onhashchange 事件来更改样式。https://developer.mozilla.org/en/DOM/window.onhashchange

于 2011-02-07T18:36:30.650 回答