在输入框聚焦时改变div的颜色

Question

我尝试的是改变带有字母 s 的 div 的颜色。

<div class="search_container">
    <input type="text" class="search_field" placeholder="Search..." />
    <div id="magnify_glass">s</div>
</div>

我尝试的是这个。

<script>
    $('.search_field').focus(function() {
        $('#magnify_glass').css('color','#ff0000');
    });
</script>

- Acidic Cloud

Answer 1

假设你的代码位于文档的中，那么你只需要一个文档准备就绪处理程序。试试这个： 更新 要删除颜色，您还需要添加一个模糊处理程序。

<script>
    $(function() {
        $('.search_field').focus(function() {
            $('#magnify_glass').css('color','#ff0000');
        }).blur(function() {
            $('#magnify_glass').css('color','transparent'); // or whatever the default is.
        });
    });
</script>

此外，最好使用“class”为元素添加样式，因为这可以更好地分离关注点：

.focus { color: #F00; }

$('.search_field').focus(function() {
    $('#magnify_glass').addClass('focus');
}).blur(function() {
    $('#magnify_glass').removeClass('focus');
});

- Rory McCrossan

---

太棒了，它能正常工作，但是它在头脑中，你能解释一下为什么它失败了吗？但是当输入框失去焦点时，它会保留颜色。 - Acidic Cloud

你需要添加文档就绪处理程序，以便在DOM完全填充时执行你的代码。在你原来的代码中，它会尝试将“focus”处理程序分配给尚不存在的元素。 - Rory McCrossan

谢谢解释，+1，你能告诉我如果输入框失去焦点后该怎么去除效果吗？ - Acidic Cloud

我总是接受的，只要系统允许我 :) 只是一件小事情，如果我们向一个id添加一个类，特异性将会困扰任何人，所以这里要用!important。 - Acidic Cloud

Answer 2

您的代码很好，能够正常工作。您需要确保将代码放在document.ready中，以确保元素在被脚本访问之前可用，并且您已经添加了jQuery库。

现场演示

$('.search_field').focus(function () {
    $('#magnify_glass').css('color', '#ff0000');
}).blur(function() {
    $('#magnify_glass').css('color', '#000000');
})

- Adil

---

谢谢，+1，你能告诉我当输入框失去焦点时如何去除红色吗？ - Acidic Cloud

你可以使用“模糊”来取消焦点。请更新我的答案，看一下。 - Adil