Почему событие jQuery .focus страницы не меняет стиль фона на зеленый в Google Chrome после перенаправления? - PullRequest
Новая
       11

Почему событие jQuery .focus страницы не меняет стиль фона на зеленый в Google Chrome после перенаправления?

2 голосов
/ 10 августа 2011

Цель:

После перенаправления измените фоновый цвет первого поля ввода на зеленый (на target.html).Это работает, если вы переходите по ссылке явно (введите ее в строку URL) в Google Chrome.

Я использую эту версию Google Chrome: 13.0.782.112

Сложно использоватьjFiddle, так что я просто дам вам код, используя файл jQuery сети доставки контента (CDN), чтобы вам было проще.

См. этот вопрос для получения более подробной информации:

Почему в Google Chrome поле ввода начальной страницы не меняет поле ввода на Зеленый?

Исходная страница: (назовите эту страницу как 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.html и поместите в ту же папку, что и файл source.html) 

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

1 Ответ

2 голосов
/ 10 августа 2011

Ваша лучшая ставка здесь - динамически связывать эти события onfocus и onblur вместо их жесткого кодирования в HTML. Примерно так: 

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

Этот код должен заменить все ваши текущие JavaScript, а также атрибуты onfocus и on blur в этих полях ввода.

С вашим текущим решением кажется, что в jQuery или Chrome (или обоих) есть ошибка, связанная с инициированием событий, связанных в HTML, а не через JavaScript. По какой-то причине происходит то, что событие DOMContentLoaded передается как переменная 'evt' вместо события onfocus.

Если вы заинтересованы в дальнейшем изучении этой ошибки и, возможно, даже в представлении отчета об ошибке, вы можете увидеть, что происходит более подробно, добавив оператор window.console.log(evt); в первую строку вашей функции Change. Затем откройте WebKit Web Inspector и посмотрите на консоль, вы увидите там объект Event и заметите, что его тип - «DOMContentLoaded», хотя на самом деле он должен быть «focus».

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...