jQuery切换焦点/失焦

Question

我该如何使用jQuery在焦点/失焦时切换元素的CSS样式？

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

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

现在我有了这个。但它并没有完全起作用...

- hubrid

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>

- vsync

---

这是最优雅的解决方案。 - Pete

应该是 if( e.type == 'focus' ) - Tayyab Chaudhary

@TayyabChaudhary - 不一定 - 在进行事件委托时。请阅读：(https://developer.mozilla.org/zh-CN/docs/Web/API/Element/focusin_event) - vsync

@vsync 如果（e.type == 'focusin'）在jQuery中不起作用，所以我检查了console.log(e.type);并返回在输入字段获得焦点时为focus，失去焦点时为blur。这就是为什么我用focus替换了focusin。也许对某人有帮助。 - Tayyab Chaudhary

请写下jQuery版本和浏览器类型。在这种特定情况下，打印类型并不有帮助，因为focus事件不会冒泡。我已经在许多系统上使用focusin事件超过12年了。 - vsync

Answer 2

尝试一下

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

- mattsven

Answer 3

如果我理解您的意思正确，您可以使用 onblur 和 onfocus 事件，并使用 toggleClass 函数：

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

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

- bluefoot

---

哦，如果我使用这个，CSS 在第一次聚焦时就会改变。然后在失焦时它不会恢复到之前的状态。第二次失焦也是如此。但实际上，在第三次失焦时它才会恢复到先前的 CSS。我正在使用的代码在上面。 - hubrid

你可以将 bind('blur focus') 结合起来使用。 - John Magnolia

Answer 4

模糊效果只有在您离开输入框时才会激活，因此您可以使用它来再次取消焦点。

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

- TheCrazyProfessor