为什么初始页面焦点不会在Google Chrome上将输入字段更改为绿色？

为什么初始页面焦点不会在Google Chrome上将输入字段更改为绿色？ 我可能要挖掘rgb的东西，不是吗？

    function Change(obj, evt) { if (evt.type == "focus") { obj.style.borderColor = "black"; obj.style.backgroundColor = "#90EE90"; // light green on focus } else if (evt.type == "blur") { obj.style.borderColor = "white"; obj.style.backgroundColor = "#7AC5CD"; // light blue on blur } } jQuery(document).ready(function() { jQuery("#Txt1").focus(); });   .InputField { color: black; font-size: 12px; font-weight: bold; background-color: #7AC5CD; }    
 
 
   

================

8/8/2011更新

对不起，我对这个问题不够具体。 我将写一个更详细的新问题..通过更改我的初始代码以使用jQuery代码，我可以让它工作。 在我发布包含“绿色”和“谷歌浏览器”的问题后，我会向所有人投票并将某人标记为答案，因为您在第一轮中非常有帮助。 这样，您将立即得到通知，并可以使用真实的应用程序代码开始处理我的实际问题。 下一个将更加艰难。 🙂

早期线索==>如果我在设置焦点或使用jQuery调用.focus（）之前发出警报，然后在JavaScript警报上单击“确定”，它将变为绿色。 如果我退出警报消息，背景颜色不会变为绿色。

===================

8/9/2011更新

问了一个新问题：

为什么页面jQuery .focus事件在重定向后不会在Google Chrome中将背景颜色样式更改为绿色？

Answer 1

Change函数的范围似乎存在问题。 看一下这个JS小提琴的工作示例。

Answer 2

你应该尝试坚持一种编写javascript的方式…简单的javascript或jQuery。

您的代码应该是您在JsBin中可以找到的代码 ：

HTML

样式

 .InputField { color: black; font-size: 12px; font-weight: bold; background-color: #7AC5CD; display: block; } .InputFieldSelected { color: white !important; background-color: #90EE90 !important; } 

使用Javascript

 $(function() { $(".InputField") // OnFocus .bind("focus", function() { $(this).toggleClass("InputFieldSelected"); }) // OnBlur .bind("blur", function() { $(this).toggleClass("InputFieldSelected"); }) // Let's focus the first input .filter(":first").focus(); }); 

---

如果你想简单化，你可以避免所有jQuery绑定和使用

样式

  .InputField { color: black; font-size: 12px; font-weight: bold; background-color: #7AC5CD; display: block; } .InputField:focus { color: white !important; background-color: #90EE90 !important; } 

使用Javascript

 $(function() { // Focus on the first input $(".InputField:first").focus(); }); 

Answer 3

为什么不直接使用CSS？ 将使您的代码更清洁，您将不会做太多的处理。

只需添加此CSS伪类

 .InputField:focus{ border-color:#000; background-color: #90EE90; } 

摆脱内联JS，以便您拥有以下HTML

摆脱JSfunction，让你有JS

 $(document).ready(function() { $('#Txt1').focus(); }); 

在这里查看结果

编辑：

正如其他用户所指出的，一些旧的浏览器可能无法识别伪类’：下面的焦点’是您可以使用的替代代码。 保持HTML如上所示，并按如下方式更改CSS：

 .isinfocus{ border-color:#000; background-color: #90EE90; } 

并向JS添加以下内容：

 $('.InputField').focus(function(){ $(this).addClass('isinfocus'); }) .blur(functio‌​n(){ $(this).removeClass('isinfocus'); }); 

这应该更适合旧版浏览器。

Answer 4

它在chrome中的加载时不会改变，因为传递给Change函数的事件类型是load。 通过更改以下内容，我能够使其工作：

 if(evt.type == "focus") 

至

 if(evt.type == "focus" || evt.type == "load") 

我做了一个JS小提琴，你可以在这里玩一些其他的改变。