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

时间:2013-11-16 10:25:17

标签: jquery events focus blur

您好我有一个输入表单,我还有一些标签可以帮助用户填写表格。我的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> 

3 个答案:

答案 0 :(得分:12)

尝试

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()中的事件委托。

<小时/> 参考文献

this keyword

.next()

.find()

.parent()

答案 1 :(得分: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'); 
  });    

});

这应该有效

答案 2 :(得分:0)

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

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

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

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

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

$('article,header')。addClass('blurItems');

现在看起来很可爱。