在輸入焦點/模糊處移除/添加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類

回答

相關問題