jQuery и поперечного поля ввода браузера обработка фокуса


У меня есть форма и нужно уметь выделить/украсить поля, как они получают фокус (изменить цвет фона, границы). Я также украшать их соответствующих 'метки'.

Все отлично работает, где это нужно: ФФ, сафари, IE 7, 8 и 9

Проблема 1 возникают с IE7 и меняется цвет фона выпадающего окна. Там мне пришлось прибегнуть к обычному JS, чтобы открыть элемент и использовать события onfocusin 'и' onfocusout 'в противном случае это займет 2 кликов, чтобы использовать поле.

2 Проблема была с сафари и как он обрабатывает "фокус" случае с радио кнопками. Для этого я использую 'события мыши: mouseenter" и "mouseleave' события, чтобы изменить цвет своих 'метки'.

Там чище способ сделать это? В предупреждения я не имею никакого контроля HTML-кода вообще и я не могу использовать что-нибудь другое, чем в jQuery 1.4.3, что все это продиктовано системы управления контентом надо работать.

Вот полный 99.9% "производства" код пример: http://jsfiddle.net/HenriPablo/YvDPa/3/

Скрипт в вопрос:

$(document).ready( function(){

    /* PROFILE PAGE ONLY -> get rid of separator border on shipping addres block when editing any of the shipping addresses */
    if( $('#formShippingAddress').length > 0 ){
        $( 'table#block\\.crmshipping tbody tr td.block\\.crmshipping\\.text' ).css('border','none');
    }

    /* highlight input field labels when input field has focus */
    /* see if event bubble - this is critical for handling decoration of select drop down boxes in IE7 */
    if( $.support.changeBubbles){

        var partialID = 'table[id^="page"]'
        var focusable = $( partialID + ' input[type="text"], ' + partialID + ' input[type="password"], ' + partialID + ' select, ' + partialID + ' input[type="checkbox"]' );
        var clickable = $( partialID + ' input[type="radio"]' );

        focusable.focus( function( ){   decorate( $(this) ); })     
        focusable.blur( function( ){ decorate( $(this) ); })

        clickable.mouseenter( function(){ decorate( $(this) ); })
        clickable.mouseleave( function(){ decorate( $(this) ); })

    } else { // bubbling support check

        var i, d = document.getElementsByTagName('select')  

        for( i in d ){
            d[i].onfocusin = function() { 
                this.style.backgroundColor = '#b4d5ec' 
                $(this).closest("td").prev().addClass('highlightLabel');
            }
            d[i].onfocusout= function() { 
                this.style.backgroundColor='#ffffff' 
                $(this).closest("td").prev().removeClass('highlightLabel');
            }
        } // for

        $('table[id^="page"] input' ).focus( function( ){
            decorate( $(this) )     
        })

        $('table[id^="page"] input').blur( function( ){ 
            decorate( $(this) );
        })      
    } // handle  IE7

    function decorate( elm ){
        elm.toggleClass('highlightField');
        elm.closest("td").prev().toggleClass('highlightLabel');
    } // decorator function
});

Заранее большое спасибо :-)



1003
2
задан 15 августа 2011 в 01:08 Источник Поделиться
Комментарии
1 ответ

Я не совсем уверен, если это будет действительно то, что вы хотите, но вот мой ворошить код:

$(document).ready(function() {
$('table[id^="block"] input, select').bind("focus blur", function() {
var $this = $(this);
$this.closest("td").prev().toggleClass('highlightLabel');
$this.not("select").toggleClass('highlightField');
});
});

Вы можете увидеть его в действии здесь на jsFiddle.

Насколько я могу судить, единственное, что я изменился, в поведении, в том, что выбрать в раскрывающемся списке нет цвет фона при фокусировке. ИМО, это выглядит лучше, но вы могли бы предпочесть его цветом фона.

Это, кажется, работает одинаково на всех браузерах я тестировал, но дайте мне знать, если это не так и я буду смотреть на это и посмотреть, если я могу это исправить.

2
ответ дан 15 августа 2011 в 03:08 Источник Поделиться