HTML Button自动刷新页面的问题

最新推荐文章于 2024-09-10 11:30:12 发布
最新推荐文章于 2024-09-10 11:30:12 发布
阅读量2.4w 收藏 8
点赞数 15
分类专栏： 其它 文章标签： html5 button click事件 按钮 刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jrainbow/article/details/44978843
版权

一、问题

<button class="am-btn am-btn-default am-btn-xs am-text-secondary" data-id="99"  data-type=1><span class="am-icon-pencil-square-o"></span>修改</button>

页面上有这样一个按钮，每次点击这个按钮的时候，执行完button的click事件后，会自动的重新刷新一下当前的页面。

二、原因

button,input type=button按钮在IE和w3c，firefox浏览器区别：
1、当在IE浏览器下面时，button标签按钮，input标签type属性为button的按钮是一样的功能，不会对表单进行任何操作。
2、但是在W3C浏览器，如Firefox下就需要注意了，button标签按钮会提交表单，而input标签type属性为button不会对表单进行任何操作。

三、解决办法

为button按钮增加一个type=”button”属性。

<button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-id="99"  data-type=1><span class="am-icon-pencil-square-o"></span>修改</button>
点击button会自动刷新页面??
丁哒哒的博客
01-06 2737
为什么点击button会自动刷新页面
在自己写的html中点击button，页面会自动刷新的问题
无_言的笔记本
09-18 2955
以前在写练习的时候遇到过这样一个问题，自己在html中写了一个button<button>test1</button>在没有给其附上onclick事件时是点击是不会有任何反应的 但是把这个button放入from表单时<form action="testAction" method="psot"> <button>test1</button> </form>无论有没有给button附上事件
HTML5 `＜button＞` 标签深入全面解析
软考鸭
09-10 1499
标签广泛应用于各种交互式网页中，如表单提交、模态框的打开和关闭、导航菜单的展开和收起等。通过结合使用CSS样式和JavaScript事件处理，可以创建出既美观又功能强大的按钮。标签是一个功能强大且灵活的元素，它提供了丰富的属性用于定义按钮的行为和外观，同时也支持CSS样式和JavaScript事件处理。标签的用法和特性，我们可以更好地利用它来创建出优秀的交互式网页。在这个简单的例子中，我们创建了一个普通的按钮，其上的文本是“点击我”。标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一。
Button自动刷新页面
yangyang的专栏
10-12 579
1.问题 &amp;lt;button&amp;gt; 登陆 &amp;lt;/button&amp;gt; 页面上有这样一个按钮，每次点击这个按钮的时候，执行完button的click事件后，会自动的重新刷新当前的页面。 2.原因 &amp;lt;button&amp;gt;、&amp;lt;input tpye=&quot;button&quot;&amp;gt;按钮在IE和W3C浏览器的区别： 1.当在IE浏
form表单中的button自动刷新页面问题
leechoy
12-26 2250
form表单中的button自动刷新页面问题 form表单中如果存在button的话，有可能会出现一个问题：点击button，触发了页面的自动刷新事件。 原因是因为标签默认的类型是submit，即默认的button点击就会触发表单的提交事件。 <button></button> <!-- 两者是相当的 --> <button type="sumbit"></button> 解决的办法有三个。 1.在标签中添加属性type=“button”。 2
【Html】解决 button 按钮点击后自动刷新页面的问题
Jessieeeeeee的博客
01-09 8653
问题 页面上有一个查询按钮为 Button 标签，点击查询按钮后会自动刷新页面，令人费解，查资料后发现是 button 的默认行为导致的。 <button class="btn btn-default active" id="btnAdd" click="selectData()">查询</button> 原因 button，input type=button 按钮在 IE 和 w3c，firefox 浏览器区别： 1、当在 IE 浏览器下面时，button 标签按钮，input
layui点击按钮页面会自动刷新的解决方案
10-16
### 页面自动刷新问题描述 在HTML页面中，开发者常会使用<button>或<input type="button">标签来创建按钮。在大多数情况下，这些按钮被点击时并不会导致页面刷新。但是，当在某些特定的Web框架下，如layui，或者在...
ASP.NET 页面刷新的实现方法(包括html,js)
10-29
3. 使用JavaScript编写自动刷新页面的函数。可以通过`setTimeout`函数设置超时，周期性地刷新页面，示例代码如下： ```html var limit = "3:00"; if(document.images){ var parseLimit = limit.split(":"); ...
解决点击button按钮会刷新页面的问题
2301_79420857的博客
11-17 1081
【代码】解决点击button按钮会刷新页面的问题。
button 按钮点击刷新页面?
youthwsj的博客
02-06 328
button默认是submit，所以很多情况下点击按钮虽然啥都没写会导致页面刷新，要想利用一个button，必须使其type="button"，否则会导致页面刷新。
vue项目点击button按钮页面自动刷新问题总结
cabinx的博客
08-18 7029
vue项目点击button按钮页面自动刷新问题总结 1.问题背景： 最近在做的一个vue项目遇到了一个奇葩的问题，在页面中有个弹窗，在弹窗页面搜索条件后点击搜索按钮后，弹窗关闭并自动刷新了当前页面。关键是这个问题还难复现，因为它只是第一次进入页面时才会有闪退刷新页面，后面就正常，要复现这个问题每次要清除缓存且重新进入页面。 2.解决方案： 在查找资料后发现其实这个问题是我使用了原生的button按钮，而使用原生按钮需要注意的是：原生按钮button默认的type='submit'这个值时默认具有表单提
点击button按钮整体页面刷新
JiAyInNnNnN123的博客
11-09 2078
(2)表单提交时，所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交，除了Submit对象。(1)Submit将表单提交(form.submit())作为其onclick后的默认事件，Button并非如此。button按钮的默认type是submit,当type是submit的时候会触发action。当前form中action为空，所以直接跳转当前页面，导致搜索按钮点击，页面重新加载一遍。问了同事，说可能是button默认的type导致的。
如何避免form表单内点击button按钮导致页面刷新？解决方案大揭秘！
weixin_50407990的博客
03-24 2789
在Web开发中，我们经常会使用form表单来收集用户提交的数据，但是有时候在form表单内点击button按钮会导致页面刷新，这对用户体验来说是十分不友好的。默认情况下，form表单内的button按钮的type属性为submit，也就是说，当用户点击这个按钮时，会自动将表单内的数据提交到后台处理。通过本文的介绍，我们了解了form表单内点击button按钮会刷新页面的原因，并掌握了两种避免刷新页面的方法。除了表单提交按钮的默认行为会刷新页面，还有一些其他情况也会导致页面的刷新。
html自定义刷新按钮,分享自定义按钮btn-dialog在关闭弹窗后刷新父窗体 刷新 关闭 按钮 callback 自定义...
weixin_30616635的博客
06-20 1124
1. 问题pbQbfXfrXttg4OMWXV65/A==自定义一个btn-dialog按钮 弹出一个弹窗 在完成了弹窗内的业务关闭弹窗后 要刷新按钮所在窗体数据2. 思路8NlgAND04QM46qNZtwE9sA==查找了若干社区帖子，综合Karson老板的回复使用fast.api.open 和fast.api.close 是正途3. 正确姿势hbnDNTpq8Jk4EWfXcJ4Fmw==自...
HTML页面刷新及其应用例子
2301_77958698的博客
01-17 838
点击重新载入页面</a><a href="">点击重新载入页面
button按钮刷新页面的几种方式
码媛小洋的博客
09-29 3494
<input type=button value=刷新 onclick="location.reload()"> <input type=button value=刷新 onclick="location=location"> <input type=button value=刷新 onclick="location.assign(location)"> <input type=button value=刷新 onclick="document.execcom
网页刷新代码(html)两种方式
w1661824810的博客
09-22 4440
网页刷新代码(html)两种方式： window.location.href = window.location.href; window.location.reload();
html页面提交后自动刷新
最新发布
10-27
在HTML页面中，如果你想要提交表单后自动刷新页面，通常会使用JavaScript结合`<form>`标签和`window.location.reload()`方法。以下是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>自动刷新</title> <script> function submitAndReload() { document.getElementById("myForm").submit(); // 提交表单 window.location.reload(); // 页面加载完成后自动刷新 } </script> </head> <body> <form id="myForm" action="/submit-page" method="post"> <!-- 替换为实际的提交地址 --> <!-- 表单内容... --> <button onclick="submitAndReload()">立即提交并刷新</button> </form> </body> </html> ``` 当用户点击“立即提交并刷新”按钮时，表单会被提交到指定URL，然后页面会在请求成功后自动刷新。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值