javascript - 使用 jQuery 克服 IE 按钮值错误

Question

问题:在 IE 6 和 7 中，按钮元素的文本在 jQuery 中使用 .val() 或 .attr('value') 返回，而不是按钮的实际值。这是一个已知问题，使用 .value 的直接 Javascript 也会发生此问题。这里有一个以前的讨论:

Retrieve Button value with jQuery

但从未找到可接受的整体解决方案(只有暂时隐藏按钮文本的 hack)。

我一直在研究一个完整的解决方案，以便无论何时访问按钮的值(无论是在表单提交上还是仅使用 jQuery/Javascript)，都会返回正确的值。我用下面的代码与 .val() 一起工作。 我正在寻求帮助，让它也可以使用 .attr('value') 工作，如果可能的话甚至使用直接的 Javascript .value。

我已经设置了一个 JSfiddle 页面，可以在此处看到它的运行情况:

http://jsfiddle.net/hyperseer/RVyDN/2/

代码:

$(document).ready(function(){

    $().iefixer();

});

(function($){  

    $.fn.iefixer = function(){  

            $.fn.origval = $.fn.val;
            $.fn.val = function(value){
                var elem = this[0];
                if(value === undefined){
                    var returnVal = null;
                    if( elem.nodeName.toLowerCase() == 'button' )
                    {
                        returnVal = elem.getAttributeNode("value").nodeValue;
                    } else {
                        returnVal = $(elem).origval();
                    }
                    return returnVal;
                } else {
                    if( elem.nodeName.toLowerCase() == 'button' )
                    {
                        elem.getAttributeNode("value").nodeValue = value;
                    } else {
                        $(elem).origval(value);
                    }

                }
            }

$('button').click( function() {

alert( "$(this).val() = " + $(this).val() ); // this works now with above fix
alert( "$(this).attr('value') = " + $(this).attr('value') ); // doesn't work
alert( "this.value = " + this.value ); // straight JS doesn't work

            });

    };

})(jQuery); 

Answer 1

更新:

我现在使用以下代码将它与 .val() 和 .attr('value') 函数一起使用:

$(document).ready(function(){
    $().iefixer();
});

(function($){  

$.fn.iefixer = function(){  

    var ie = $.browser.msie;
    var ver = $.browser.version;

    if ( ie && ver<=7 ) {

        $.fn.origval = $.fn.val;
        $.fn.val = function(value){
            var elem = this[0];
            if(value === undefined){
                var returnVal = null;
                if( elem.nodeName.toLowerCase() == 'button' )
                {
                    returnVal = elem.getAttributeNode("value").nodeValue;
                } else {
                    returnVal = $(elem).origval();
                }
                return returnVal;
            } else {
                if( elem.nodeName.toLowerCase() == 'button' )
                {
                    elem.getAttributeNode("value").nodeValue = value;
                } else {
                    $(elem).origval(value);
                }

            }
        }

     var originalAttr = $.fn.attr;
        $.fn.attr = function(name, val) {
            if (this[0].nodeName.toLowerCase() == 'button' && val === undefined) return $(this).val();
            return originalAttr.apply(this, arguments);    
        }

    }      

};

})(jQuery);