表单样式设置故障：输入框聚焦触发标签显示功能失效

嘿，我瞅见你在做一个「输入后才显示标签」的表单效果，hover变体没问题，但focus事件就是不生效对吧？问题出在你写focus事件的方式上啦！

问题根源 #

jQuery的.focus()方法只接受一个回调函数（就是聚焦触发的逻辑），你把失焦时要执行的removeClass也塞进去当第二个参数，这是不生效的——jQuery根本不会识别这个第二个函数哦！

修复方案 #

我们需要把聚焦和失焦的逻辑分开绑定，或者用.on()方法统一管理事件：

方案1：分开绑定focus和blur事件

$('input').focus(function(){
  // 聚焦时给前一个标签添加focus类
  $(this).prev().addClass('focus');
}).blur(function(){
  // 失焦时，如果输入框为空才移除focus类，保证输入内容后标签一直显示
  if ($(this).val().trim() === '') {
    $(this).prev().removeClass('focus');
  }
});

方案2：用.on()绑定多个事件

$('input').on({
  focus: function(){
    $(this).prev().addClass('focus');
  },
  blur: function(){
    // 同样判断输入框是否为空，空的话才移除类
    if (!$(this).val()) {
      $(this).prev().removeClass('focus');
    }
  }
});

额外提示 #

别忘了确保你的CSS里.focus类的样式和.hover类一致哦，比如：

label.focus {
  opacity: 1;
  visibility: visible;
  /* 或者你用的其他显示样式 */
}

这样聚焦时标签才能正常显示，而且用户输入内容后，哪怕失焦标签也会保持显示，完全符合你的需求～

内容的提问来源于stack exchange，提问作者The Old County