在输入焦点/模糊处移除/添加CSS类

我有一些输入字段和一个小的<div>的表格，每个输入的右边有一个小的描述。我想要的是为每个输入自己的描述启用一个CSS类<div>。在输入焦点/模糊处移除/添加CSS类

我在这里做了一个工作示例：http://jsfiddle.net/VL2FH/8/。这使用<div>：悬停状态在输入的焦点状态。

我要问的是：是否有某种形式的“捷径”，所以我没有做：

$('#submit_name').bind('blur', function(){ 
    $('#submit_name-desc').removeClass('input-desc-hover').addClass('input-desc'); 
}); 
$('#submit_name').bind('focus', function(){ 
    $('#submit_name-desc').removeClass('input-desc').addClass('input-desc-hover'); 
});

在表单中输入的每个领域。

来源

2012-06-23 Morten Hagh

像这样http://jsfiddle.net/joycse06/VL2FH/11/ –

正是这样！这工作绝对完美！你能回答吗？ –

好的，作出答复。 –

可以概括focus and blur回调这样

$('input').on('blur', function(){ 
    $(this).next('div').removeClass('input-desc-hover').addClass('input-desc'); 
}).on('focus', function(){ 
    $(this).next('div').removeClass('input-desc').addClass('input-desc-hover'); 
});

如果你的描述divs是旁边的输入元素，它会正常工作。

最好使用.on()进行事件绑定。

演示：http://jsfiddle.net/joycse06/VL2FH/11/

来源

2012-06-23 13:31:25

对于简单的解决方案。我倾向于过分复杂的东西:) –

谢谢你的这个:) 这个解决方案，我可以重复使用的网站，我有不同的形式与不同的名称/ ID等，而无需调整！ –

@MiroslavPopovic，谢谢先生。 :) –

使用类而不是ID来选择元素。如果输入元素具有submit-name类和你的描述desc类，你可以做这样的：

$('.submit-name').bind('blur', function(){ 
    $("~ .desc", this).first().removeClass('input-desc-hover').addClass('input-desc'); 
}).bind('focus', function(){ 
    $("~ .desc", this).first().removeClass('input-desc').addClass('input-desc-hover'); 
});

$("~ .desc", this).first()将与一类desc选择输入元素（this）的第一个兄弟。

这里有一个更新的jsfiddle为：http://jsfiddle.net/miroslav/VL2FH/13/

编辑

Joy's solution与$(this).next()要好得多，虽然。

来源

2012-06-23 13:22:53

检查该波纹管的示例程序

<html> 
     <head> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
      <script type="text/javascript"> 
       $(document).ready(function() 
       { 

        $('#submit_name').bind('blur', function() 
        { 
         $('#submit_name-desc').removeClass('cls1').addClass('cls2'); 
        }); 

        $('#submit_name').bind('focus', function() 
        { 
         $('#submit_name-desc').removeClass('cls2').addClass('cls1'); 
        }); 
       }); 
      </script> 

      <style> 
       .cls1 
       { 
        background-color: #ccc;     
       } 

       .cls2 
       { 
        background-color: #fff; 
       } 
       .submit_name-desc 
       { 
        height: 30px; 
        border: 1px; 
       } 
      </style> 
     </head> 
     <body> 
      <input type="text" id="submit_name" /> 
      <div id="submit_name-desc"> 
       Name Description 
      </div> 
     </body> 
    </html>

来源

2012-06-23 13:32:20 Hearaman

也只能通过使用相邻兄弟选择+，使任何.input-desc直接下达到CSS同样的效果重点输入将应用不同的规则：

input:focus + .input-desc { 
    cursor: default; 
    width: 265px;  
    -moz-box-shadow: 0px 2px 5px #aaaaaa; 
    -webkit-box-shadow: 0px 2px 5px #aaaaaa; 
    box-shadow: 0px 2px 5px #aaaaaa; 
    animation:desc 0.3s; 
    -moz-animation:desc 0.3s; /* Firefox */ 
    -webkit-animation:desc 0.3s; /* Safari and Chrome */ 
}

相邻的兄弟选择是从版本8（http://reference.sitepoint.com/css/adjacentsiblingselector）

这里的现代浏览器和IE浏览器的支持是一个小提琴：http://jsfiddle.net/VL2FH/14/

来源

2012-06-23 22:54:04 jussinen

在输入焦点/模糊处移除/添加CSS类

回答

相关问题