LMLPHP后院

IE和Chrome下INPUT之type为submit时disabled导致Form无法提交技术

maybe yes 发表于 2016-04-17 22:40

记录一个浏览器之间的差异,火狐和 IE,Google Chrome 之间的不同,其他的浏览器就不知道啦,一般开发人员能兼顾的也就只有这三个浏览器啦。

在火狐下开发,当 input 的 type 为 submit 时触发表单提交,如果想在前端体验更好一点点,不要让用户重复点击按钮,有一种做法是将 submit 按钮的的 disabled 设置为 true。这样在火狐下是没有问题的,但是在 IE 和 Chrome 下会导致 Form 表单被阻止提交,原因大家都能想的到,onSubmit 事件触发后执行的动作导致按钮为不可用状态,自然就失效了,无法提交。

解决方法很简单,去除设置 disabled 为 true 的那行代码。用其他的方式依然可以很好的解决这个问题。比如 setTimeout,比如使用 this.flag 等。定时器解决问题当然是没有问题的,但是实现起来比较麻烦,于是最简单的方法如下示例:

$('#result').delegate("input[type=submit]", "click", function(){
	var _this = this;
	var data_id = $(this).attr('data-id');
	
	if(this.flag){
		return;
	}
	this.flag = true;

	if(this.form.target){
		$("#"+this.form.target).load(function(){
			_this.flag = false;
			submit_actions[data_id](content);
		});
	}
});
相关文章
2024-04-25 18:31:27 1714041087 0.026886