更改输入焦点上的 div 颜色答案

【问题标题】：Change the div color on input focus更改输入焦点上的 div 颜色
【发布时间】：2013-01-02 09:00:29
【问题描述】：

我正在尝试用字母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>

【问题讨论】：

标签： javascript jquery focus

【解决方案1】：

您的代码很好并且可以正常工作，您需要确保您在document.ready 中有代码，以确保在脚本访问之前元素可用性并且您添加了 jquery 库。

Live Demo

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

【讨论】：

谢谢，+1，你能告诉我当输入没有焦点时我应该如何去除红色
你可以使用模糊来散焦，更新我的答案，请看一下。

【解决方案2】：

假设您的代码在文档的<head> 中，您只需要一个文档就绪处理程序。试试这个：

更新

要删除颜色，您还需要添加 blur 处理程序。

<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');
});

【讨论】：

太棒了，它有效，是的，它在头脑中，你能解释一下为什么它失败了吗？但这会在输入未聚焦时留下颜色
您需要添加文档就绪处理程序，以便在 DOM 完全填充时执行您的代码。在您的原始代码中，它会尝试将 focus 处理程序分配给尚不存在的元素。
感谢您的解释，+1，如果输入不聚焦，您能告诉我我需要做什么来消除效果吗？
我总是接受，只要系统允许我就会接受 :) 只是作为旁注，如果我们要向 id 添加一个类，特异性会给任何人带来麻烦，所以@987654328 @ 将在这里发挥作用