IE7下confirm和disabled的问题及解决(asp.net),同时兼容标准浏览器

时间:2022-07-16 05:45:34

这两天花这上面的功夫太多了,就不试验是asp.net的原因还是本身就是ie7自身的原因了,问题是这样的:

原因需求是,点击提交按钮/链接,这时候会有大量的数据处理,耗时较长,客户要求点击后,要把该按钮灰掉,同时否掉了用一个半透明的弹出层并显示加载动画的方案,因为那样太“web2.0“了,哈哈,对于企业内部应用,有时候原始一些的手法更让人接受啊,我认为很简单,于是开干,当前,一个小插曲,进行一些关键数据的提交,是需要先确认的,不知道以前为什么没发现这个问题,反正这次碰到了,网上一搜还挺多,

就是按钮本身有一个click事件,然后注册一个onClientClick事件,根据它的返回值来判断是否提交数据,形如:

<asp:Button ID="Button1" runat=server Text="testbtn" CssClass="test" OnClick="testclick" OnClientClick="return confirm('sure?');" />

测试顺利通过,可是当我在IE7下测试的时候,发现不管点确认还是拒绝,都提交出去了,无奈,只有google,乱七八糟的原因我不想知道了,解决如下:

<asp:Button ID="Button1" runat=server Text="testbtn" CssClass="test" OnClick="testclick" 
OnClientClick="var r=false; if(confirm('sure?')) r=true; event.returnValue=r; return r;" />

这个例子我顺便解决了两个问题,1,用event.returnValue=false;可以阻止IE7提交了,可是却使得FF不能阻止提交了;2于是,再加上return false;就可以解决了。

好,这是confirm的解决。

 

为了下面的例子的简单,我们就假定没有confirm了,直接解决disabled的问题。

设想是按钮一点击,就触发禁用该按钮的事件,这样,按钮不能再次被点击,数据也正常被提交。

我们全用这个按钮触发

<asp:Button ID="Button1" runat=server Text="testbtn" CssClass="test" OnClick="testclick" OnClientClick="dis(this);" />

当然,为了更全面,我们有时候还用一个A标签来模拟一个按钮样式进行提交,我之前其实就是这么做的,所以我们会同时测试这两种效果

asp:LinkButton ID="LinkButton1" runat="server" Text="test" CssClass="stepbtn" OnClick="btnNext_click" OnClientClick="dis(this);"></asp:LinkButton>

js独立出来,而且使用jQuery:

function dis(o){
	$(o).attr("disabled",true);
}

结果发现:

按钮:无论是在IE7,还是FF,无一能够提交数据,禁用倒是禁用掉了,用submit类的表单控件会在提交前检查自身的disabled属性,假如在检查的时候属性已经是真了,那么数据是不会被提交了;

超链接:IE7下漂亮地变灰了,然后发现,居然还是不能提交!可见用了类似表单控件的逻辑;火狐下当然没有变灰的效果,可是却能一次一次地提交,也就是说,这个属性是没有任何意义的。

 

在这个基础上,改造JS:

题外话,因为我为了方便传对象作参数,设了一个全局变量,关于怎么给setTimeout/setInterval传对象参数的问题请自行google,可变通的方法很多,不专述

var thisobj;
function dis(o){
	thisobj=0;
	setTimeout(function(){$(thisobj).attr("disabled",true);},300);//延时,让数据先提交,再来禁用该元素
}

结果:

按钮:就是我们要的效果;

超链接:IE7顺利通过,火狐勉强通过,但是假如你在这个链接上还有confirm语句确认,你每次点击,它还是会弹出来,虽然经过验证,数据只提交了一次,所以假如此时你的系统大部分已经用了链接在提交,却要实现这种效果,那只能在confirm之前确定一下该元素的disabled属性是否为字符串'true',注意,不是布尔值,当然,你要是在js里面定义成'disabled‘,那也可以。本质上,disabled是表单元素的属性,非表单元素在标准浏览器下就会出现现在这种种问题。

 

这是做完之后总结的,示例代码纯手写,没经过验证,假如拷贝过去无效,那就主要看一下思路吧,呵呵。