更改输入焦点上的 div 颜色
Posted
技术标签:
【中文标题】更改输入焦点上的 div 颜色【英文标题】：Change the div color on input focus 【发布时间】：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>
【问题讨论】：
【参考方案1】：假设您的代码在文档的<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 @ 将在这里发挥作用【参考方案2】：
您的代码很好并且可以正常工作，您需要确保您在document.ready 中有代码，以确保在脚本访问之前元素可用性并且您添加了 jquery 库。
Live Demo
$('.search_field').focus(function ()
$('#magnify_glass').css('color', '#ff0000');
).blur(function()
$('#magnify_glass').css('color', '#000000');
)
【讨论】：
谢谢，+1，你能告诉我当输入没有焦点时我应该如何去除红色 你可以使用模糊来散焦，更新我的答案，请看一下。以上是关于更改输入焦点上的 div 颜色的主要内容，如果未能解决你的问题，请参考以下文章