我正在为网页设计的在线心理实验创建一个程序。 (请看下面的代码)
我想做的是，如果用户点击某个输入框，它会调用 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>
最佳答案
我不确定这是否能解决您的问题，但 location.hash 通常包含 # 符号，因此我认为您应该将其分配给 "#one" 而不是 "one"。
此外，在 Firefox 中，您可以选择使用 onhashchange 事件在您进行跳跃时更改您的样式。 https://developer.mozilla.org/en/DOM/window.onhashchange
关于css - 为什么在 Firefox 中 location.hash 之后样式效果仍然存在？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4924611/