I am creating a program for online psych experiment on web design. (please see the code below)
What I am trying to do is, if user clicks on some input box, it invokes onFocus event, then the page jumps to that place (i.e. the box comes to the top of the page), and the box has some effect on its outline to indicate that it has focus.
I could implement that using location.hash, anchor, and style.outline.
However, in Firefox, once the page jumps to the anchored point, outline style remains there even though I have a event onBlur to remove the outline style. Does anyone know why this happens and how to fix it? Most related functions to this problem are jump() and noeffect() in the code.
This works in Chrome and Safari, but not in Firefox. (IE is also not working. IE does not even show the outline style at all. If you know how to fix in IE, please let me know too) Preferably, I want my program to be used in all major browsers.
Thanks in advance!
---------code-----------
<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>
I'm not sure if this fixes your problem, but location.hash normally includes the # symbol, so I think you should assign it
"#one"instead of"one".Also, in Firefox you have the option of using the onhashchange event to change your style when you do your jump. https://developer.mozilla.org/en/DOM/window.onhashchange