表单中一些默认行为
程序员文章站
2022-04-18 21:30:20
...
DOM结构:
注意一点,我没有给button指定type类型,很多人觉得语义化的button标签其实就是type="button",这是错误的!!!
当我点击取消或者确认按钮,页面发生了跳转!所以:表单中的button标签默认类型是submit
然后我顺便按下回车键,页面也会跟着调整如上图所示,行为二:表单中会自动注册回车提交事件,并且IE中表现一致!
在项目中绝大多数都是已ajax提交表单,没必要在form的action中填写url,还是刚才的DOM结构只是去掉了action属性(容易被忽略的)
通过debugger发现,先执行注册事件,然后又进行了一次表单刷新请求,
行为三:当未指名form action 属性和button type类型,会先触发自定义按钮事件然后表单请求事件(表单又重新刷新了一遍,坑点)
目前我所知道的表单默认行为就是以上几点,解决办法:
1.在form中添加 action="javascriopt:",秒杀上述所有默认行为;
2.button 添加 type="button"属性,或者在注册事件时候阻止默认行为e.preventDefault();
推荐阅读
-
浅谈angular表单提交中ng-submit的默认使用方法
-
flex中event.preventDefault()方法取消事件的默认行为
-
浅谈angular表单提交中ng-submit的默认使用方法
-
yii ar中的rules()规则在收集表单中的一些作用
-
yii ar中的rules()规则在收集表单中的一些作用
-
在twig中创建表单时指定使用bootstrap样式,但是显示的效果还是默认的效果,这是为什么?
-
仅Firefox中链接A无法实现模拟点击以触发其默认行为_javascript技巧
-
表单中一些默认行为
-
仅Firefox中链接A无法实现模拟点击以触发其默认行为_javascript技巧
-
antd Form表单getFieldDecorator中设置RangePicker的默认时间