Question

问题在于焦点功能仅适用于“名称”（第一个），而不适用于“电子邮件”（第二个）。当它聚焦时，它应该改变背景的位置，从而形成一个黄色边框，这对于第一个也可以正常工作。

这是js：

    $("#formLeft input").focus(function() {
    $(this).parent().addClass("active");
    });
    $("#formLeft input").blur(function() {
    $(this).parent().removeClass("active");
    });

CSS

#formLeft {
width: 320px;
float: left;
}
#formLeft input {
    width: 250px;
    border: none;
    text-align: left;
    background: none;
    margin: 13px 0 0 13px;
    font-size: 14px;
}
#formLeft .input-bg {
    background: url(bilder/input-bg.jpg) top left no-repeat transparent;
    height: 45px;
    margin-bottom: 10px;
    position: relative;
}
#formLeft div.active {
    background: url(bilder/input-bg.jpg) bottom left transparent;
    height: 45px;
    margin-bottom: 10px;
    position: relative;
}

HTML

<div id="formLeft">

            <label for="Name">Name:</label>
            <div class="input-bg">
                <input type="text" name="Name" id="Name" class="required" minlength="2" />
            </div>


          <label for="Email">Email:</label>
            <div class="input-bg">
                <input type="text" name="Email" id="Email" class="required email" />
            </div>

        </div>

提前致谢！

Answer 1

这是一个jsfiddle，你想要的是工作顺序：

我添加了jquery onReady以确保元素在它们被聚焦处理程序绑定之前存在。

http://jsfiddle.net/yxnFL/4/

我将图像更改为颜色，以便我可以看到它是否正常工作。我的猜测是，如果你仍有问题，那么你的图片就会出现问题。

Answer 2

焦点功能正常。检查这个小提琴。 http://jsfiddle.net/yxnFL/6/

我使用背景颜色进行演示。

如果您可以发布“input-bg.jpg”图片的网址，将会很有帮助。

输入焦点只在firefox中的1/2字段上工作; chrome（不在IE中）

2 个答案: