bootstrap 模态窗和datepicker搭配，清空form问题

最新推荐文章于 2020-12-24 04:19:55 发布
原创 最新推荐文章于 2020-12-24 04:19:55 发布 · 300 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap

本文记录并解决了在使用Modal窗口结合Datepicker时，点击日期选择器触发的事件导致表单内容被清空的问题。通过调整Modal的打开方式，避免了事件的重复触发。

今天遇到一个问题，记录下，以后备查。

问题现象：

modal窗搭配datepicker使用的时候，datepicker获取光标会清空form里面的全部项目。

网上查了下原因如下：

点击日期选择器的时候会触发 ‘show.bs.modal’ ‘hide.bs.modal’ 事件。
而我在模态窗打开的时候也调用了 ‘show.bs.modal’ 并在事件中对表单进行初始化，点击选择器时触发了’show.bs.modal’导致将form表单中内容清空。

 

 

解决方法：

modal打开的时候不再调用‘show.bs.modal’，改为用别的方式打开模态窗：

 

bootstrap模态框关闭后清除模态框的数据方法
10-18
Bootstrap是一种流行的前端框架，它简化了网页设计和开发的...这篇文章所分享的方法对于处理Bootstrap模态框关闭后的数据清理问题提供了明确的指导，对于前端开发人员来说具有很好的参考价值，并期望得到大家的支持。
Bootstrap 模态框（Modal）带参数传值实例
08-29
总结来说，Bootstrap模态框的带参数传值功能主要通过JavaScript和jQuery实现，通过在触发按钮上添加数据属性，然后在点击事件中获取这些值并显示在模态框内。这样，不仅可以确保每个模态框显示与触发按钮相关的特定...
模态框中的form表单使用bootstrap-datetimepicker选择日期时，同个form表单中所有内容都会清空
chengzhang9513的博客
07-23 633
发现现象过程： 标题点击自己所建立的弹窗按钮，触发点击事件，窗口弹出再form表单的input中输入内容，点击引用bootstrap-datetimepicker的input时form表单中所有内容全部清空 发现原因过程: 上网查询是否存在相同的情况，在该链接https://bbs.youkuaiyun.com/topics/392030377 中了解到点击选择器的时候会触发 ‘show.bs.modal’ ‘hide.bs.modal’ 事件 而我在弹窗按钮点击事件中调用了 ‘show.bs.modal’ 并在该
Bootstrap 清空表单form select2赋值
weixin_30569033的博客
09-08 769
清空BootstrapFrom表单 document.getElementById("savForm").reset(); 如有select2下拉列 需初始化 $("#displaytype").val("").select2(); select2动态填充 　　var date="[{id:'form_qx_user',text:'用户表单'},{id:'qx_user',text:'用...
修复bootstrap daterangepicker不能清空日期的问题
燃烧JAVA
03-19 1万+
最近项目中使用了一个基于Bootstrap的daterangepicker控件。 1.点击页面其他空白的地方，会把之前在日历上选中的日期选择上。 具体描述： 1.点击打开日期选择框 2.选择一个日期范围，用户没有点击“Apply”按钮，然后点击页面其他空白区域，控件会把选择的日期赋值到文本框中去。 这个需求估计在国外属于正常的情况。但是国内的用户习惯是：点击其他空白地方，应该是和
关于bootstrap清空表单的两种方法
xu_xu_0924的博客
07-14 4439
第一种最直接也相对来说最简便的 $('#模态框的id').on('hidden.bs.modal', function () { document.querySelector('#form1').reset(); }); 第二种比较繁琐 $(‘#模态框的id').on('hidden.bs.modal', function () { //输入框清空 $("#表单id input").each(function(){ $(this).val(''); }) //下拉菜单清空 $("#
有关清空表单的各种可能的操作
domino的专栏
08-26 5806
1.用按钮清空，用 reset()方法，或者用javascript 写空值的方法2.按浏览器“后退”返回上一页的时候清空表单内容，那么就在文件头部分加上：，再介绍一下xhtml中的内置行为：savehistory          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xht
BootStrap 模态框实现刷新网页并关闭功能
08-31
Bootstrap模态框（Modal）是前端开发中常用的一种交互组件，它允许在当前...希望这篇文章对你在使用Bootstrap模态框时有所帮助，如果你在实践中遇到任何问题，欢迎留言提问，我们将尽力为你解答。感谢你对我们的支持！
解决bootstrap模态框数据缓存的问题方法
10-18
通过上述方法的组合使用，可以有效解决Bootstrap模态框在新增和修改操作中的数据缓存问题，保证用户在每次操作时都能看到一个干净的表单，避免数据错误，提升用户体验。在实际开发中，可以根据具体需求调整这些方法...
BootStrap模态框和select2合用时input无法获取焦点的解决方法
08-29
总结来说，当Bootstrap模态框和Select2插件同时使用时，若遇到input无法获取焦点的问题，可以尝试移除模态框的`tabindex="-1"`属性。这是最常见且有效的解决方案。如果你已经尝试过这种方法但问题依然存在，可能需要...
bootstrap-fileinput 插件 初始化时 如何实现删除
变强啊！三少奶奶
01-14 4560
当我们从数据库中读出图片地址并通过bootstrap-fileinput.js插件进行展示时 往往会进行删除操作 但很多时候发现 初始化图片时 我们点击预览图中的删除按钮 没有反应  但我们从新上传后删除按钮又起作用了 这是由于我们没有配置初始化时的参数 只要配置好initialPreviewConfig里的url (删除服务器图片url) 我们在绑定时的filepredelete事...
解决bootstrap-fileinput无法删除initialPreview初始化预览的文件
胡朴桤的博客
04-16 8818
1.导语 最近在开发的时候遇见bootstrap-fileinput文件上传无法删除initialPreview预览文件的问题。因为很多情况下可能有一些默认的文件，但是需要删除，可是页面显示了删除按钮却无法删除文件，在网上查找了很多资料，没有看见解决方案，最后自己查看了源码后找到了问题所在。 2.思路 之所以显示了删除按钮却不能删除预览图的原因是因为没有给按钮绑定事件，所以我们只需要在插件初...
datepicker怎么清空值,清除bootstrap-datepicker的值
weixin_30045055的博客
12-24 584
version: 2.3.2I am having trouble to clear the date values of the datepicker when a button is clicked. I have checked the API but cannot find anything on clearing/resetting the datepicker. Any help is...
提交form后，清空form内input值
b809220024的博客
06-17 2万+
经常要用到的一个功能，新增一行数据，但是新增完成后，原来填的值会继续留在上面。 比如下图的tt，第二次打开依旧存在 jquery下，用form表单提交$(‘#form’).submit()那么，就可以简单的用$(‘#form’).reset() 不过我用ajax提交的时候没用form的表单提交功能，所以想了想，手动清除$("#form_sample_eventAdd input").val
bootstrap关闭modal后，如何清空modal里的bootstrapValidator的校验痕迹
JamesCole的博客
09-08 1万+
在使用bootstrapValidator和modal结合使用时，出现的关闭modal后，再次打开modal，之前的验证会一直保留，并没有像官网example里那样灵活验证，不知道问题在只能强行清空。 强行移除自动添加的class，以及隐藏提示元素（此处不可以remove，因为bootstrapValidator源js中是在初始化验证时，创建此元素，之后只进行隐藏和显示操作，如果remove改元
最简单的清空表单（form）方法
热门推荐
明天的你会感谢今天的自己
08-08 2万+
新手菜鸟我在做项目的时候遇到了非常非常常见的需求：表单内容清空（充重置），相信有点点HTML+JavaScript的朋友都有办法做到，但我想能不能有代码最少、一步到位的的方法呢，我查了w3c后有了一下总结： <html> <head> <script type="text/javascript"> function formReset() { doc...
可清空所选时间的jquery.datetimepicker时间插件
王二丫的博客
03-26 5583
效果图：点击垃圾桶图标可清空所选时间，重新进行选择。直接用下方的css和js就好，这是在源码基础上修改的，可以直接替代源码，除了添加的清除功能外其他功能依旧在。css:  文件名称 jquery.datetimepicker.css（其中垃圾桶图标的url根据需要自行修改）.xdsoft_datetimepicker{ box-shadow: 0px 5px 15px -5px rgba(0, 0...
bootstrapValidator验证表单后清除当次验证的方法
duansamve的博客
10-11 6416
用bootstrapValidator的resetForm()方法： <!-- // create server begin --> <div class="modal fade" id="server-create-server-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&.
解决iframe中Bootstrap模态框遮罩父页面问题
通过上述方法的使用和组合，可以较好地解决在iframe内使用Bootstrap模态框时，模态框无法遮罩父页面的问题。具体采用哪种方法，需要根据实际情况和项目需求来决定。在实现解决方案时，务必考虑安全性、兼容性和用户...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值