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

#jquery #focus #toggle

#jquery #фокус #переключение

Вопрос:

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

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

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

Итак, теперь у меня есть это. Но это не совсем работает…

Ответ №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>

Ответ №2:

Попробуйте

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

Ответ №3:

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

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

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

1. Хммм, если я использую это, css изменится при первом фокусе. Тогда размытие обратно не изменится. Ни второго размытия. Но на самом деле при третьем размытии он возвращается к предыдущему css. Код, который я использую, приведен выше.

2. Вы могли бы объединить bind('blur focus')

Ответ №4:

Размытие становится активным только тогда, когда вы оставляете ввод, поэтому вы можете использовать его для повторного удаления фокуса.

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