`

表单中一些默认行为

阅读更多

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();


 

  • 大小: 14.7 KB
  • 大小: 21.4 KB
  • 大小: 16.8 KB
  • 大小: 1.6 KB
分享到:
评论

相关推荐

    DHTML 默认行为中文手册

    在DHTML中,"默认行为"指的是浏览器对特定用户交互(如点击链接或提交表单)的预设响应。了解这些行为对于优化网页交互和避免不必要的冲突至关重要。 手册内容可能包括以下几个方面: 1. **DOM操作**:DHTML的基础...

    js阻止默认浏览器行为与冒泡行为的实现代码.docx

    在Prototype库中,可以使用`Event.stop(event)`来同时阻止默认行为和事件冒泡。 **事件冒泡与默认行为的实际应用**: 在某些情况下,如表单提交或链接点击,浏览器有默认的行为,如打开新页面或提交数据。如果希望...

    js阻止冒泡和默认事件(默认行为)详解

    在实际的应用中,这两者常常结合使用,比如在一个下拉菜单的点击事件中,我们需要阻止冒泡以避免其他元素的事件处理器被触发,同时也需要阻止默认行为(如表单的提交动作)来防止页面刷新。 作者在文章中还提到了...

    防止Layui form表单重复提交的实现方法

    在上述函数中,如果需要在禁止表单默认提交行为的同时,与服务器进行数据交互,则可以使用JavaScript的XMLHttpRequest或者现代的Fetch API来异步提交表单数据。使用AJAX提交表单数据的好处是,可以避免页面刷新,...

    CSS样式表单美化系列

    在网页设计中,CSS(Cascading Style Sheets...以上就是CSS样式表单美化的一些核心知识点,通过这些技巧,我们可以打造出美观且易用的网页表单,提升用户体验。这个系列将深入讲解每个方面,帮助你掌握表单设计的艺术。

    js 验证表单 动态提示

    5. **阻止默认行为**:为了防止未通过验证的表单被提交,我们可以在`submit`事件处理函数中调用`event.preventDefault()`,阻止表单的默认提交行为。 6. **异步验证**:对于更复杂的验证,例如检查用户名是否已存在...

    默认行为中文手册预览版 (IE5.0+)

    默认行为中文手册预览版(IE5.0+)是一份专为Internet Explorer 5.0及以上版本设计的DHTML对象模型(DHTML Object Model)技术文档,它为我们揭示了在网页开发中如何利用JavaScript或者VBScript与浏览器交互,创建...

    DHTML手册 默认行为 文档对象模型3合1

    1. **浏览器默认行为**:如链接的点击跳转、表单提交、图片右键保存等,以及如何通过JavaScript自定义这些行为。 2. **阻止默认行为**:如使用`event.preventDefault()`来阻止链接跳转或表单提交。 3. **事件冒泡和...

    jquery实现通过按钮弹出表单

    // 阻止表单默认提交行为 var formData = $(this).serializeArray(); // 获取表单数据 // 在这里可以进行数据验证、发送Ajax请求等操作 console.log(formData); // 提交成功后关闭表单 $("#formContainer")....

    表单中的Json格式数据使用方法

    当用户点击“提交”按钮时,我们阻止了默认的表单提交行为,然后将`FormData`对象转换为JavaScript对象,再进一步转换为JSON字符串。这样,我们就可以在控制台看到类似这样的输出: ```json {"name":"张三","age":...

    js阻止浏览器默认行为触发的通用方法(推荐)

    在前端开发中,我们经常需要处理用户的交互行为,比如点击链接、提交表单等,浏览器会根据HTML元素的默认行为来做出响应。但在很多场景下,我们可能需要阻止这些默认行为的发生,以实现更为丰富的交互效果或进行一些...

    设置aspx网页中的默认按钮

    - 使用`event.preventDefault()`阻止默认行为,确保回车键不会引起页面的刷新或其他默认操作。 ### 总结 设置ASP.NET Web Forms中默认按钮的过程涉及前后端的协作。前端通过JavaScript监听回车键事件并触发按钮...

    js阻止默认浏览器行为与冒泡行为的实现代码

    在实际应用中,如在表单提交按钮的事件处理中,我们可能需要同时阻止事件的默认行为和冒泡。例如,用户在表单中输入数据后可能习惯于按回车键提交表单,这会导致页面跳转,而我们的目的可能是用JavaScript处理数据后...

    浅谈jQuery 中的事件冒泡和阻止默认行为

    在Web开发中,元素经常有一些默认行为。例如,一个`<a>`标签的默认行为是页面跳转,表单的默认行为是提交数据。在某些场景下,我们可能不希望这些默认行为发生,比如当用户在表单中未填写必要的信息时,我们就不应该...

    简单的表单验证

    // 阻止表单默认提交行为 } }); ``` 上述代码中,`getElementById`用于获取具有指定ID的元素,`addEventListener`添加事件监听器,`trim()`方法去除字符串两端的空白,`event.preventDefault()`防止表单默认提交...

    表单高级搜索2014版

    5. **插件化设计**:"jQuery.AdvSearch-0.3.js"作为插件,意味着它可能包含了一些预定义的搜索行为和方法,开发者可以通过简单的配置或调用来定制搜索表单的行为,如添加自定义的搜索条件、改变提示文字等,这增强了...

    jquery表单验证插件

    // 阻止默认提交行为 }); ``` ##### 4.4 实例:序列化表单 ```javascript var queryString = $('#myFormId').formSerialize(); $.post('myscript.php', queryString); ``` #### 五、详细API说明 - **ajaxForm**: ...

Global site tag (gtag.js) - Google Analytics