Удалить / добавить класс CSS при вводе фокус / размытие

у меня есть форма с полями ввода, и немного <div> справа от каждого входа с небольшим описанием. Я хочу включить класс CSS для каждого входа <div> С его собственным описанием.

Я привел здесь рабочий пример:http://jsfiddle.net/VL2FH/8/. Это использует <div>: наведите курсор на состояние фокуса входного сигнала.

что я хочу спросить: есть ли какой-то "ярлык", поэтому мне не нужно сделать:

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

для каждого поля ввода в форме.

6
blur css focus html5 jquery

4 ответов

вы можете обобщить focus and blur обратный вызов, как это

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

если ваше описание divs находятся рядом с элементом ввода, он будет работать нормально.

и лучше использовать .on() для привязки событий. ​

демо: http://jsfiddle.net/joycse06/VL2FH/11/

15

вы также можете достичь того же эффекта в CSS только с помощью соседнего селектора sibling + Так что любой .input-desc непосредственно после сфокусированного ввода будут применяться различные правила:

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 */  
}

соседний селектор братьев и сестер поддерживается в современных браузерах и Internet Explorer с версии 8. ( http://reference.sitepoint.com/css/adjacentsiblingselector )

вот скрипка:http://jsfiddle.net/VL2FH/14/

4

проверьте этот ниже пример программы

    <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

используйте классы вместо идентификаторов для выбора элементов. Если ваши входные элементы имеют submit-name класс и ваши описания desc класс, вы можете сделать это так:

$('.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() будет выбрать первый брат входного элемента (this) С класс desc.

вот обновленный jsFiddle для этого:http://jsfiddle.net/miroslav/VL2FH/13/

редактировать

Джой С $(this).next() гораздо лучше, хотя.

0