Размытие / фокус не работает должным образом в Opera - PullRequest
Новая
       22

Размытие / фокус не работает должным образом в Opera

0 голосов
/ 03 марта 2012

Я использую следующий код jquery, чтобы сделать текстовую рамку оранжевой на фокусе и серой на размытие.Кроме того, при выполнении проверки, если ввод для определенного текстового поля является неправильным, граница становится красной, и отображается символ «X» (который является меткой). 

$(function() {

    $('.textbox').focus(function() {
        $(this).css('border', '1px solid orange');

    });
    $('.textbox').blur(function() {
        $(this).css('border', '1px solid gray');
    });

    // $('.num').mouseover(function() {
    //  $('.num').easyTooltip();
    //  });

    $("label").easyTooltip();
    // $("a").easyTooltip();


    $('.checkdate1').blur(function() {
        var checkdate = $(this).val();
        var error = this.id;
        error = "#lbl" + error.substring(3);
        if (checkdate != "") {
            if (isDate(checkdate)) {
                $(error).css('display', 'none');
                $(this).css('border', '1px solid gray');
            }

            else {
                $(this).focus();
                $(this).css('border', '1px solid red');
                $(error).css('display', 'inline');

                 }

        }
        else {
            $(error).css('display', 'none');
            $(this).css('border', '1px solid gray');
        }
    });
 });

Проблема в том, что он работает нормально в Chrome,mozilla т.е. onfocus оранжевый, onblur серый и красный errror.Я установил фокус на текстовое поле, если ввод неправильный и с красной рамкой, что означает, что если пользователь пытается щелкнуть другое текстовое поле, он не сможет этого сделать.В опере проблема появляется ,, если ввод неправильный, текстовое поле становится красным ,,, и имеет фокус ,,, но если пользователь нажимает на какое-то другое текстовое поле ,, его цвет становится оранжевым ,,,, с фокусом по-прежнему с текстовым полем с неправильнымвход.Может ли кто-нибудь предложить мне, где проблема Любая помощь приветствуется.Спасибо

1 Ответ

1 голос
/ 03 марта 2012

Попробуйте это с версией jQuery 1.7.1.Я изменил часть вашего кода и добавил функцию для проверки даты. 

$(function() {

    $('.textbox').on({
        focus : function() {
            $(this).css({border : '10px solid orange'});
        },

        blur : function() {
            $(this).css({border : '10px solid gray'});
        }
    });

    // $('.num').mouseover(function() {
    //  $('.num').easyTooltip();
    //  });

    //$("label").easyTooltip();
    // $("a").easyTooltip();


    $('.checkdate1').on('blur', function() {
        var self = $(this),
            checkdate = self.val(),
            new_d = new Date(checkdate),
            error = "#lbl" + $(this).attr("id").substring(3);

        if (checkdate !== "") {

            if ( dt_check(checkdate) ) {
                $(error).css('display', 'none');
                self.css('border', '1px solid gray');
            }

            else {
                self.focus().css('border', '1px solid red');
                $(error).css('display', 'inline');
            }

        } else {
            $(error).css('display', 'none');
            self.css('border', '1px solid gray');
        }
    });
 });

function dt_check(input) {

    //Date format should be (DD/MM/YYYY)

    var valid_regx = /^\d{2}\/\d{2}\/\d{4}$/,
        returnval = false

    if ( ! valid_regx.test(input) ) {
        returnval = false;
    } else{

        var spl_date = input.split("/"),
            d_day = spl_date[0],
            d_month = spl_date[1],
            d_year = spl_date[2],
            d_obj = new Date(d_year, d_month-1, d_day);

            if ((d_obj.getDate()!=d_day)||(d_obj.getMonth()+1!=d_month)||(d_obj.getFullYear()!=d_year)) {
                returnval = false;
            }
            else { returnval = true; }
        }
    return returnval
}

Вы можете отключить другое поле / btns, чтобы избежать ввода неправильного значения, такого как: 

$('.checkdate1').on('blur', function() {
        var self = $(this),
            checkdate = self.val(),
            new_d = new Date(checkdate),
            other_input = $('.textbox'),
            error = "#lbl" + $(this).attr("id").substring(3);

        if (checkdate !== "") {

            if ( dt_check(checkdate) ) {
                $(error).css('display', 'none');
                self.css('border', '1px solid gray');
                other_input.attr('disabled', false);
            }

            else {
                self.focus().css('border', '1px solid red');
                $(error).css('display', 'inline');
                other_input.attr('disabled', true);
            }

        } else {
            $(error).css('display', 'none');
            self.css('border', '1px solid gray');
            other_input.attr('disabled', false);
        }
    });
...