jQuery bind focus and blur events on input form

Question

Hi I have an input form and I also have some labels which will help a user to fill out the form. My css is set to hide these by default but when the user clicks on focus's on the input field then the next label will show and on blur it will be hidden.

With the current script I have written for some reason it keeps showing all the labels and it doesn't seem to hide it on blur.

Not an expert on jQuery so if any could help me fix this problem that would great.

My code is below or view a 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>

Why do you have 2 ID's on the page with the same name? You also seem to have 2 labels for each input. You can't do that. Also, you should rather wrap your inputs in p tags or divs, and labels don't need wrappers. — 3Dom, Nov 16 '13 at 10:36
@3Dom accident i copy and pasted that to make a simple example as I'm using blade templates in laravel — user0129e021939232, Nov 16 '13 at 10:38

Tushar Gupta - curioustushar · Accepted Answer · 2013-11-16T10:49:20.913

Try

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');
    });
});

Better Approach

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();
    });
});

Better use .on() instead of .bind()

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate().

References

score 3 · Answer 2 · answered Nov 16 '13 at 10:37

3

$(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'); 
  });    

});

This should work

answered Nov 16 '13 at 10:37

waldek_h

930
9
16

There are some significant differences: for example use of **on** instead **bind**: [link](http://stackoverflow.com/questions/8065305/whats-the-difference-between-on-and-live-or-bind?answertab=active#tab-top), but true it was posted 3 minutes later – waldek_h Nov 16 '13 at 10:45
1

I could start discussion about good practices, but for what? Just FYI **bind** and **live** methods are mapped internally to **on**. IMO both answers are correct. I don't have to copy/paste, its not a contest. – waldek_h Nov 16 '13 at 10:59

score 0 · Answer 3 · answered Dec 03 '19 at 18:20

0

I've searched the whole internet and finally I found the thing that I needed.

When something is on focus (in my case - the "More options" button), I wanted everything in the background to be blurred like in the image uploaded.

I've used jQuery simply by adding a class in css:

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

I added this class to my articles and header (because I wanted only them to be blurred):

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

Looks so cute now.

answered Dec 03 '19 at 18:20

Katherine Dragieva

1
2

Welcome to Stack Overflow. I'm glad you found what you needed. But I think your case is a different question, cause it is the blur effect not the blur event like the question. – vladwoguer Dec 03 '19 at 19:08

jQuery bind focus and blur events on input form

3 Answers3