jQuery切换焦点/模糊

Question

如何使用jQuery在焦点/模糊上切换元素的CSS？

$('.answerSpace').bind('blur', function(){
$('.normProf').toggleClass('opacProf');
});

$('.answerSpace').bind('focus', function(){
    $('.opacProf').toggleClass('normProf');
});

所以现在我有了这个。 但它不太有用......

Answer 1

看看这个，这正是你们应该怎么做jQuery焦点切换..

基本用例：

 $('input').on('focus blur', toggleFocus); function toggleFocus(e){ console.log(e.type) if( e.type == 'focusin' ){ // do something on focus } else{ // do something else on blur } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input> 

Answer 2

尝试

$('.answerSpace').bind('blur', function(){ $('.normProf').removeClass("normProf").addClass('opacProf'); });
$('.answerSpace').bind('focus', function(){ $('.opacProf').removeClass("opacProf").addClass('normProf'); });

Answer 3

好吧，如果我找到了你，你可以使用toggleClass函数使用onblur和onfocus事件：

$('#yourelement').bind('blur', function(){
    $(this).toggleClass('your-class');
});

$('#yourelement').bind('focus', function(){
    $(this).toggleClass('your-class');
});

Answer 4

只有在您输入时才会激活模糊，因此您可以使用它来再次移除焦点。

$('input').focus(function(){
    $(this).css('box-shadow', '0px 0px 1px #ccc');
});

$('input').blur(function(){ 
    $(this).css('box-shadow', 'none');
});