为什么页面jQuery .focus事件会在重定向后将Google Chrome中的背景颜色样式变为绿色？ [英] Why isn't page jQuery .focus event changing background-color style to green in Google Chrome after redirect?
问题描述
在重定向之后，将第一个输入框的背景色更改为绿色（在target.html上）。如果您在Google Chrome浏览器中明确地链接到该链接（在URL栏中输入该链接），它就可以正常工作。
我使用的是Google Chrome的这个版本：
13.0.782.112 b
$ b 在这个版本上使用jFiddle很困难，所以我只给你使用Content Delivery Network（CDN）jQuery文件的代码来使它更容易
查看此问题以获取更多详细信息：
为什么没有初始页面焦点改变输入字段格式为Google Chrome？
源页面：
page as source.html）
< html>
< head>
< / head>
< body>
< a href =./ target.html>在Google Chrome浏览器中点击此超链接，查看target.html< / a>第一个输入字段上的背景颜色是否变为绿色;
< / body>
< / html>
目标页面：
（将此页面命名为target.html，并将其放在与source.html文件相同的文件夹中）
$ b
< html> ;
< head>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js>< / script>
< script type =text / javascript>
更改（obj，evt）{
if（evt.type ==focus）{
$（obj）.css（'border-color'，' ＃000000' ）;
$（obj）.css（'background-color'，'＃90EE90'）;
else if（evt.type ==blur）{
$（obj）.css（'border-color'，'#FFFFFF'）;
$（obj）.css（'background-color'，'＃7AC5CD'）;
$ b $（document）.ready（function（）{
$（＃Txt1）。focus（）;
} ）;
< / script>
< style type =text / css>
.InputField
{
颜色：黑色;
font-size：12px;
font-weight：bold;
背景颜色：＃7AC5CD;
}
< / style>
< / head>
< body>
< input id =Txt1runat =serverclass =InputFieldonfocus =Change（this，event）onblur =Change（this，event）/>< ; br />
< input id =Txt2runat =serverclass =InputFieldonfocus =Change（this，event）onblur =Change（this，event）/>< br /> gt ;
< input id =Txt3runat =serverclass =InputFieldonfocus =Change（this，event）onblur =Change（this，event）/>< br /> ;
< / body>
< / html>
$ c> onfocus 和 onblur 事件，而不是在HTML中进行硬编码。就像这样：
$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ //绑定事件
$（'＃Txt1，＃Txt2，＃Txt3'）。focus（function（）{
$（this）.css（'border-color'，'＃000000'）;
$ （this）.css（'background-color'，'＃90EE90'）;
}）。blur（function（）{
$（this）.css（'border-color'，' FFFFFF'）;
$（this）.css（'background-color'，'＃7AC5CD'）;
}）;
//触发第一个焦点事件
$ （'＃Txt1'）。focus（）;
}）;
这段代码应该会取代所有当前的JavaScript，以及 onfocus 和在模糊这些输入框上的属性。
似乎有一个jQuery或Chrome（或两者）有关的触发事件绑定在HTML中，而不是通过JavaScript的错误。无论出于何种原因，会发生什么情况是， DOMContentLoaded 事件将作为evt变量而不是 onfocus传递事件。
如果您有兴趣进一步探索这个bug，甚至可能提交一个bug报告，您可以通过添加一个 window.console.log（evt）; 语句到你的Change函数的第一行。然后打开WebKit Web Inspector并查看控制台，您将看到Event对象，您将注意到它的类型是DOMContentLoaded，即使它实际上应该是焦点。
Goal:
Have first input box background-color change to green (on target.html) after redirecting. It works if you go to the link explicitly (type it into the URL bar) in Google Chrome.
I'm using this version of Google Chrome: 13.0.782.112
It's difficult to use jFiddle on this one, so I'll just give you the code using the Content Delivery Network (CDN) jQuery file to make it easier for you.
See this question for more details:
Why doesn't initial page focus change input field to Green on Google Chrome?
Source page:
(name this page as source.html)
<html>
<head>
</head>
<body>
<a href="./target.html">click this hyperlink in Google Chrome and see if the background-color changes to green on the first input field on target.html</a>
</body>
</html>
Target page:
(name this page as target.html and place in same folder as source.html file)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
function Change(obj, evt) {
if (evt.type == "focus") {
$(obj).css('border-color', '#000000');
$(obj).css('background-color', '#90EE90');
}
else if (evt.type == "blur") {
$(obj).css('border-color', '#FFFFFF');
$(obj).css('background-color', '#7AC5CD');
}
}
$(document).ready(function() {
$("#Txt1").focus();
});
</script>
<style type="text/css">
.InputField
{
color: black;
font-size: 12px;
font-weight: bold;
background-color: #7AC5CD;
}
</style>
</head>
<body>
<input id="Txt1" runat="server" class="InputField" onfocus="Change(this, event)" onblur="Change(this, event)" /><br />
<input id="Txt2" runat="server" class="InputField" onfocus="Change(this, event)" onblur="Change(this, event)" /><br />
<input id="Txt3" runat="server" class="InputField" onfocus="Change(this, event)" onblur="Change(this, event)" /><br />
</body>
</html>
Your best bet here is to bind those onfocus and onblur events dynamically instead of hardcoding them in the HTML. Something like this:
$(document).ready(function() {
// bind the events
$('#Txt1, #Txt2, #Txt3').focus(function() {
$(this).css('border-color', '#000000');
$(this).css('background-color', '#90EE90');
}).blur(function() {
$(this).css('border-color', '#FFFFFF');
$(this).css('background-color', '#7AC5CD');
});
// trigger the first focus event
$('#Txt1').focus();
});
This code should replace all of your current JavaScript, as well as the onfocus and on blur attributes on those input boxes.
With your current solution, it seems that there's a bug in either jQuery or Chrome (or both) pertaining to triggering events that are bound in the HTML rather than through JavaScript. What happens, for whatever reason, is that the DOMContentLoaded event gets passed as the 'evt' variable instead of the onfocus event.
If you're interested in exploring that bug further and perhaps even filing a bug report, you can see what happens in more detail by adding a window.console.log(evt); statement to the first line of your Change function. Then open up the WebKit Web Inspector and look at the console, you'll see the Event object there and you'll notice that its type is 'DOMContentLoaded' even though it should actually be 'focus'.
这篇关于为什么页面jQuery .focus事件会在重定向后将Google Chrome中的背景颜色样式变为绿色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
