JQuery переключить фокус / размытие

Question

Как я могу переключить CSS элемента на фокус / размытие с помощью jQuery?

$('.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

Что ж, если я вас правильно понял, вы можете использовать onblur и onfocus события с функцией toggleClass :

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