All geek questions in one place

Delete / add CSS class with focus / blur input

I have a form with some input fields and a little <div> right of each input with a little description. I want to include a CSS class for each input my own <div> with its own description.

I made a working example here: http://jsfiddle.net/VL2FH/8/ . This uses the <div> : hover state in the input focus state.

I want to ask: is there some kind of "shortcut", so I do not need to do:

 $('#submit_name').bind('blur', function(){ $('#submit_name-desc').removeClass('input-desc-hover').addClass('input-desc'); }); $('#submit_name').bind('focus', function(){ $('#submit_name-desc').removeClass('input-desc').addClass('input-desc-hover'); });​

For each input field on the form.

+6
source share
4 answers

You can summarize a focus and blur callback like this

 $('input').on('blur', function(){ $(this).next('div').removeClass('input-desc-hover').addClass('input-desc'); }).on('focus', function(){ $(this).next('div').removeClass('input-desc').addClass('input-desc-hover'); });

If your divs description is next to an input element, it will work fine.

And it is better to use .on() to bind the event.

Demo: http://jsfiddle.net/joycse06/VL2FH/11/

+15
source

You can also achieve the same effect in CSS only with the adjacent sibling + selector, so that any .input-desc immediately after a focused input .input-desc different rules:

 input:focus + .input-desc { cursor: default; width: 265px; -moz-box-shadow: 0px 2px 5px #aaaaaa; -webkit-box-shadow: 0px 2px 5px #aaaaaa; box-shadow: 0px 2px 5px #aaaaaa; animation:desc 0.3s; -moz-animation:desc 0.3s; /* Firefox */ -webkit-animation:desc 0.3s; /* Safari and Chrome */ }

The adjacent selector is support in modern browsers and Internet Explorer since version 8. ( http://reference.sitepoint.com/css/adjacentsiblingselector )

Here's the script: http://jsfiddle.net/VL2FH/14/

+4
source

Check out the sample program below

  <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#submit_name').bind('blur', function() { $('#submit_name-desc').removeClass('cls1').addClass('cls2'); }); $('#submit_name').bind('focus', function() { $('#submit_name-desc').removeClass('cls2').addClass('cls1'); }); }); </script> <style> .cls1 { background-color: #ccc; } .cls2 { background-color: #fff; } .submit_name-desc { height: 30px; border: 1px; } </style> </head> <body> <input type="text" id="submit_name" /> <div id="submit_name-desc"> Name Description </div> </body> </html>
+2
source

Use classes instead of ids to select items. If your input elements have a submit-name class and a desc description class, you can do this as follows:

 $('.submit-name').bind('blur', function(){ $("~ .desc", this).first().removeClass('input-desc-hover').addClass('input-desc'); }).bind('focus', function(){ $("~ .desc", this).first().removeClass('input-desc').addClass('input-desc-hover'); });

$("~ .desc", this).first() will select the first native element of the input element ( this ) with the desc class.

Here's the updated jsFiddle for this: http://jsfiddle.net/miroslav/VL2FH/13/

Edit

The joyful solution with $(this).next() much better.

0
source

Source: https://habr.com/ru/post/918825/

More articles:


All Articles