Question

您好我有一个输入表单，我还有一些标签可以帮助用户填写表格。我的css设置为默认隐藏这些，但是当用户点击输入字段上的焦点时，下一个标签将显示并且模糊它将被隐藏。

使用我编写的当前脚本由于某种原因它会一直显示所有标签，并且它似乎不会在模糊时隐藏它。

不是jQuery的专家，所以如果有任何可以帮助我解决这个问题很好。

我的代码位于下方或查看jsFiddle：

JS / js.js

$(document).ready(function(){
$('.form-control').bind('blur', function(){
$('.form_helper').removeClass("form_helper_show").addClass('.form_helper'); });

$('.form-control').bind('focus', function(){
$('.form_helper').removeClass("form_helper").addClass('form_helper_show'); });    

});

CSS / style.css中

ul {
 list-style:none;
}     

li:nth-child(2), li:nth-child(3) {
display:inline;
}

.form_helper { 
display:none;   
}

.form_helper_show {
display:inline-block;   
}

的index.html

<div class="form-group">
<ul class="form_group">
    <li><label for="client_name">Company Name</label></li>
    <li><input class="form-control" name="client_name" type="text" id="client_name"/></li>
    <li><label for="client_name_helper" class="form_helper">Input your clients name</label></li>
 </ul>    
</div>
 <div class="form-group">
 <ul class="form_group">
    <li><label for="client_name">Company Code</label></li>
    <li><input class="form-control" name="client_name" type="text" id="client_name"/></li>
    <li><label for="client_name_helper" class="form_helper">Input your clients code</label></li>
</ul>    
</div>

Answer 1

尝试

fiddle Demo

$(document).ready(function () {
    $('.form-control').bind('blur', function () {
        $(this).parent().next('li').find('.form_helper_show').removeClass("form_helper_show").addClass('form_helper');
    });

    $('.form-control').bind('focus', function () {
        $(this).parent().next('li').find('.form_helper').removeClass("form_helper").addClass('form_helper_show');
    });
});

<小时/> 更好的方法

fiddle Demo

$(document).ready(function () {
    $('.form-control').bind('blur', function () {
        $(this).parent().next('li').find('.form_helper').hide();
    }).bind('focus', function () {
        $(this).parent().next('li').find('.form_helper').show();
    });
});

<小时/> 最好使用.on()代替.bind()

从jQuery 1.7开始，.on（）方法是首选方法将事件处理程序附加到文档。对于早期版本， .bind（）方法用于直接将事件处理程序附加到元素。处理程序附加到当前选定的元素中 jQuery对象，因此这些元素必须存在于调用点到.bind（）发生。有关更灵活的事件绑定，请参阅讨论 .on（）或.delegate（）中的事件委托。

<小时/> 参考文献

Answer 2

$(document).ready(function(){
  $('.form-control').on('blur', function(e){  
      $(this).parent('li').next().find('label').removeClass("form_helper_show").addClass('form_helper'); 
  });

  $('.form-control').on('focus', function(e){
      $(this).parent('li').next().find('label').removeClass("form_helper").addClass('form_helper_show'); 
  });    

});

这应该有效

Answer 3

我搜索了整个互联网，终于找到了我需要的东西。

当焦点对准某个位置（在我的情况下-“更多选项”按钮）时，我希望背景中的所有内容都像上载的图像一样模糊。

我只是通过在CSS中添加一个类来使用jQuery：

filter: blur(8px);
-webkit-filter: blur(8px);

我将此课程添加到我的文章和标题中（因为我只希望它们模糊）：

$（'article，header'）。addClass（'blurItems'）;

现在看起来很可爱。

jQuery在输入表单上绑定焦点和模糊事件

3 个答案: