form中的button按钮在IE11中自动提交表单问题导致弹出框关闭之后表单被重置

在IE11中使用<button>标签时,触发了页面自动刷新问题,通过对比<input type="button"/>标签发现,修改后问题解决。

最近几天,测试系统,遇到一个兼容性问题,form中有一个button按钮,没有指定type类型,点击按钮弹出框选择值之后回填给form上的一个单行文本框,在IE6、IE7、IE8、IE9、IE10中测试都没有问题,唯独IE11中,弹出框关闭之后,单行文本框接收到弹出框的返回值之后,form所在的父页面自动刷新了一次,导致form中的值全部被重置了


刚开始,还以为是系统所用的Web框架不兼容IE11,经过反复测试发现,系统中有一些弹出框关闭之后,父页面是不会自动刷新的,于是开始慢慢对比源代码,最后还是找到了差异,<button></button>标签和<intput type="button"/>标签还是有很大区别的,尤其在IE11的测试环境

我将<button></button>标签改为<intput type="button"/>标签,结果就好了!

关于<button></button>标签和<intput type="button"/>标签的区别,大家请百度!^_^

看来以后还是要深入了解一些关于HTML标准的问题~

原文地址:http://blog.youkuaiyun.com/xiaolongzaixian/article/details/41912747

在 `el-form` 表单中实现栏位自适应并对齐按钮区域最右侧的布局,可以通过结合 `flex` 布局与 `el-form` 的结构特性来完成。以下是一个完整的实现方案,确保查询、重置和展开/收起按钮始终固定在右侧,并支持栏位自适应屏幕宽度变化。 ### 布局结构设计 使用 `el-form` 的 `inline` 属性开启行内表单模式,并通过 `flex` 布局控制表单项的排列方式。按钮组通过 `text-align: right` 或 `margin-left: auto` 实现右对齐。 ```html <el-form inline class="searchFormClass" :model="searchData" v-more-loading="4"> <el-form-item label="条件1"> <el-input v-model="searchData.condition1" /> </el-form-item> <el-form-item label="条件2"> <el-select v-model="searchData.condition2" placeholder="请选择"> <el-option label="选项1" value="1" /> <el-option label="选项2" value="2" /> </el-select> </el-form-item> <el-form-item label="条件3"> <el-date-picker v-model="searchData.condition3" type="date" placeholder="选择日期" /> </el-form-item> <el-form-item label="条件4"> <el-input v-model="searchData.condition4" /> </el-form-item> <!-- 更多条件可继续添加 --> <el-form-item> <div class="btns"> <el-button icon="el-icon-search" type="primary" @click="query">查询</el-button> <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button> <el-button icon="el-icon-arrow-down" @click="toggle">展开/收起</el-button> </div> </el-form-item> </el-form> ``` ### 样式定义 使用 `flex-wrap: wrap` 实现自适应换行,同时通过 `margin-left: auto` 将按钮组固定在右侧。 ```css .searchFormClass { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .btns { margin-left: auto; display: flex; gap: 0.5rem; } ``` ### 展开/收起功能实现 通过控制表单项的显示状态实现展开/收起功能,可以使用 `v-show` 或 `v-if` 控制条件栏的显示。 ```javascript export default { data() { return { searchData: { condition1: '', condition2: '', condition3: '', condition4: '' }, isExpanded: false }; }, methods: { query() { // 查询逻辑 }, reset() { // 重置逻辑 }, toggle() { this.isExpanded = !this.isExpanded; } } }; ``` ### 栏位自适应优化 通过 `flex-wrap: wrap` 可以确保在不同屏幕尺寸下,表单项能够自动换行,避免布局错乱。同时,结合 `gap` 属性控制项间距,提升可读性。 ```css .searchFormClass { display: flex; flex-wrap: wrap; gap: 1rem; } ``` ### 相关功能扩展 可以结合自定义指令 `v-more-loading` 来控制默认显示的搜索项数量,进一步优化展开/收起交互体验。该指令可基于当前项的索引动态控制 `v-show` 状态[^2]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值