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

问题是它在铬，莫扎拉，即onfocus橙色，onblur灰色和恐怖红色方面工作正常。如果输入不正确，我将焦点设置为文本框，并且红色边框表示如果用户尝试单击另一个文本框，他将无法执行此操作。在歌剧中，问题出现了，如果输入不正确，文本框变为红色,,,并且有焦点,,,但如果用户点击其他文本框，则其颜色变为橙色,,,,焦点仍然与文本框错误输入。谁能告诉我问题出在哪里？任何帮助表示赞赏。感谢

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

模糊/焦点在Opera中无法正常工作

1 个答案: