Почему эффект стиля сохраняется после location.hash в Firefox? - PullRequest
Новая
       18

Почему эффект стиля сохраняется после location.hash в Firefox?

0 голосов
/ 07 февраля 2011

Я создаю программу для онлайн-психе эксперимента по веб-дизайну.(см. код ниже). Я пытаюсь сделать следующее: если пользователь нажимает на какое-либо поле ввода, оно вызывает событие onFocus, а затем страница переходит на это место (т. е. поле попадает в верхнюю часть страницы)поле имеет некоторый эффект на его контуре, чтобы указать, что оно имеет фокусзакрепленная точка, стиль контура остается там, хотя у меня есть событие 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>

1 Ответ

0 голосов
/ 07 февраля 2011

Я не уверен, что это решит вашу проблему, но location.hash обычно содержит символ #, поэтому я думаю, что вы должны назначить его "#one" вместо "one".

Также в Firefoxу вас есть возможность использовать событие onhashchange, чтобы изменить свой стиль при выполнении прыжка.https://developer.mozilla.org/en/DOM/window.onhashchange

...