Question

我正在为网页设计创建一个网上心理实验程序。（请参阅下面的代码）我想要做的是，如果用户点击某个输入框，它会调用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>

Answer 1

我不确定这是否可以解决您的问题，但location.hash通常包含＃符号，因此我认为您应该将其分配为"#one"而不是"one"。

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

为什么样式效果在Firefox中的location.hash之后仍然存在？

1 个答案: