Opera 中的模糊/焦点无法按预期工作

Question

我正在使用以下 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 orange 、 onblur gray 和 onerror red 中运行良好。 如果输入不正确，我将焦点设置到文本框，并且带有红色边框，这意味着如果用户尝试单击另一个文本框，他将无法做到这一点。 在opera中，出现问题，如果输入不正确，文本框变成红色，，，并且有焦点，，但是如果用户点击其他文本框，它的颜色变成橙色，，，，焦点仍然与文本框错误输入。 谁能建议我问题出在哪里 任何帮助表示赞赏。 谢谢

Answer 1

使用 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);
        }
    });