问题

Why doesn't initial page focus doesn't change input field to Green on Google Chrome? I probably have to dig up the rgb stuff, don't I?

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

Sorry I wasn't specific enough on this one. I will write a new question with more details.. by just changing my initial code to use jQuery code, I can get it to work. I'll up-vote everyone and mark someone's as the answer just after I post my question containing "Green" and "Google Chrome" since you were all so helpful in the first round. That way you'll be notified immediately and can begin working on my actual question with real application code. The next one will be a little tougher. :-)

Early clue ==> If I put an alert in just before setting focus or calling .focus() with jQuery, and click OK on the JavaScript Alert, it turns green. If I leave the Alert message out, the background-color doesn't change to green.

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

8/9/2011 update

Asked a new question:

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

回答1:

There seems to be an issue with scope of the Change function. See this JS fiddle for a working example.

回答2:

You should try to stick to one way of writing your javascript... plain javascript or jQuery.

your code should be the one you can find in JsBin:

HTML

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

Styles

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

});

If you want to be simplistic you can avoid all jQuery binding and use

Styles

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

});

回答3:

Why not just use CSS instead? Will make your code cleaner and you won't be doing too much processing.

Just add this CSS pseudo class

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

Get rid off inline JS so that you have following 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 />

Get rid off JS function so that you have JS

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

Check the results here

EDIT:

As other user pointed out, some older browsers may not recognize pseudo class ':focus' below is alternative code you can use. Keep HTML as shown above and change your CSS as following:

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

And add to the JS the following:

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

This should work with older browsers better.

回答4:

It doesn't change on load in chrome because the event type passed into the Change function is load. I was able to make it work by changing the following:

if(evt.type == "focus")

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

I made a JS fiddle with a few other changes that you can play with here.

来源：https://stackoverflow.com/questions/6951587/why-doesnt-initial-page-focus-change-input-field-to-green-on-google-chrome

标签

jquery

google-chrome

focus

Why doesn't initial page focus change input field to Green on Google Chrome?