8/8/2011更新

Question

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

<html>
<head>
<script src="jquery-1.6.2.js"></script>

    <script type="text/javascript">

        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();
        });

    </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>

=====

8/8/2011更新

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

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

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

8/9/2011更新

问了一个新问题：

Why isn't page jQuery .focus event changing background-color style to green in Google Chrome after redirect?

Answer 1

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

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

<强> HTML

<input id="Txt1" runat="server" class="InputField" />
<input id="Txt2" runat="server" class="InputField" />
<input id="Txt3" runat="server" class="InputField" />

<强>样式

.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();

});

如果您想要简单化，可以avoid all jQuery binding并使用

<强>样式

  .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 2

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

只需添加此CSS伪类

即可

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

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

<input id="Txt1" runat="server" class="InputField" /><br />
<input id="Txt2" runat="server" class="InputField" /><br />
<input id="Txt3" runat="server" class="InputField" /><br />

摆脱JS功能，以便你有JS

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

检查结果here

修改

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

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

并向JS添加以下内容：

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

这应该更适合旧浏览器。

Answer 3

由于传递到更改功能的事件类型已加载，因此Chrome中的加载不会更改。我通过改变以下内容使其成功：

if(evt.type == "focus")

到

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

我做了一个JS小提琴，你可以用here.

进行一些其他更改

Answer 4

Change函数的范围似乎存在问题。有关工作示例，请参阅this JS fiddle。

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

8/8/2011更新

8/9/2011更新

4 个答案: