jQuery高亮显示活动文本框

Question

我创建了一个提琴，突出显示了一个活动的文本框。 它适用于JSFiddle

https://jsfiddle.net/FingersCrossedErie/kgbhe2j5/

但是，它在我的网页上不起作用。 我想念什么吗？

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script>
        $('input[type="text"]').focus(function () {
            $(this).addClass("focus");
        });

        $('input[type="text"]').blur(function () {
            $(this).removeClass("focus");
        });
    </script>
    <style>
        .focus {
    border: 2px solid #AA88FF;
    background-color: #FFEEAA;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <label>Name:</label>
        <input type="text" />
    </div>
    <div>
        <label>Age:</label>
        <input type="text" />
    </div>
    <div>
        <label>Phone:</label>
        <input type="text" />
    </div>
    </form>
</body>
</html>

Answer 1

尝试使用文档就绪功能，它可能在DOM准备就绪之前正在调用。

$(document).ready(function(){
//Rest of code here
});

Answer 2

 $(document).ready(function () {

            $('input[type="text"]').focus(function () {
                $(this).addClass("focus");
            });

            $('input[type="text"]').blur(function () {
                $(this).removeClass("focus");
            });

    });

jQuery高亮显示活动文本框

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-01-15 02:46:20

解决方案2
0 2016-01-15 03:39:40

jQuery高亮显示活动文本框

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-01-15 02:46:20

解决方案2 0 2016-01-15 03:39:40

解决方案1
1 已采纳 2016-01-15 02:46:20

解决方案2
0 2016-01-15 03:39:40