为什么Html页面表单回车或者Button点击会自动刷新

最新推荐文章于 2024-05-09 10:38:00 发布
最新推荐文章于 2024-05-09 10:38:00 发布
阅读量2.9k 收藏 3
点赞数 1
分类专栏： HTML Bugs 文章标签： HTML 刷新 Button 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chitoseyono/article/details/80917276
版权
Bugs 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
HTML
1 篇文章 0 订阅
订阅专栏

做H5页面的时候莫名其妙有BUG又找不到，才发现页面自动刷新了。
两个其实都是相同的原因：表单提交。

表单中按回车的问题

一个表单下，如果只有一个文本框时，按下回车将会触发表单的提交事件。

解决办法：

1.不要让你的表单只有一个输入框（往表单里加一行隐藏的输入框）

<input id="hiddenText" type="text" style="display:none" />

2.阻止表单的提交（给表单增添onsubmit属性）

<form name="keywordForm" method="post" action="" onsubmit="false">

Button的问题

button的默认类型是submit，同样也是提交表单。

解决方法：

设置button的type属性

<input type="button" value="test">
chitoseyono
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html form表单中只有一个input，按回车会触发刷新页面
PrimaryColor
03-30 220
解决方法，添加onsubmit="return false"： <form id="welcome_msg_list" onsubmit="return false"> <input type="text" /> </form>
html 文本框回车触发按钮点击事件
weixin_44084713的博客
03-04 2365
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本框回车</title> <script type="text/script" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript">
【html】输入框里按了一下回车，页面就刷新了，怎么解决？
九日的博客
12-18 1230
form表单里放了个输入框，聚焦输入框后按了回车键，整个页面被刷新了。在el-form有同样问题。
elementUI/Plus 输入框按回车刷新页面分析与解决
最新发布
共同学习，共同成长
05-09 1448
​如果你是在 ElementUI 或者 elementPlus 框架中使用组件，并希望阻止回车键导致的页面刷新，你可以使用Vue的.prevent修饰符来阻止默认的表单提交行为。
解决输入框按enter页面刷新问题
qq_42693392的博客
07-31 452
解决输入框按enter页面刷新问题 绑定键盘事件，按enter触发事件时页面刷新 解决方法： 阻止表单自动提交 1、在html中 <form onsubmit="return false"></form> 2、在Js中 需要给表单添加submit事件，并在事件中阻止掉submit事件的默认事件。 var form = document.getElementsByTagName('form')[0]; form.addEventListener('submit',functi
【HTML】表单form中一单回车就提交的text、一点击就提交的button
编程记录，亲测有效
01-11 4258
在这段HTML代码中，分两部分，第一部分，在一个表单中设置4个按钮，第一个按钮，自然是无可争议，也是大家最常用的submit按钮，这个按钮学过网页编程都知道是用来提交表单的，但大家知不知道，随后3个按钮，哪个按钮能够提交表单呢？当然，答案在上面的HTML代码中已经写明白了，如果你设置的按钮，要做一些点击的Javascript(jQuery)动作或者完成一个Ajax的话，而不是提交表单的话，请用规范的<input type="button" onclick="某某javascript函数">的形式，而不是<b
页面只有一个text的时候，回车自动submit的解决方法
09-05
在网页设计中，用户在文本输入框（`<input type="text">`）按下回车键时，浏览器通常会默认执行表单提交操作，导致页面刷新。这种情况在标题描述的场景下尤为突出，即页面只有一个文本输入框。当开发者希望在用户按...
禁止按回车键提交表单的方法
09-03
在网页开发中，用户按下回车键通常会触发表单的提交操作，这在某些情况下可能会导致意外的结果，比如在搜索框中按回车可能会刷新整个页面。本文将详细讲解如何禁止用户通过回车键来提交表单，以避免这种不必要的行为...
jQuery实现form表单基于ajax无刷新提交方法详解
10-23
jQuery 实现 form 表单基于 AJAX 无刷新提交是一种常见的前端技术，它允许用户在不刷新整个页面的情况下发送数据到服务器并接收响应。这提高了用户体验，因为页面的其他部分可以保持活动状态，而不会打断用户的操作...
jquery点击回车键实现登录效果并默认焦点的方法
10-18
需要注意的是，在实际项目中，登录请求通常会使用Ajax异步发送，以便在不刷新页面的情况下完成登录验证。在上述示例中，`$.ajax()` 方法需要填写服务器端登录接口的URL、请求类型、数据等信息。登录成功后，可能还...
【.Net码农,HTML/JS】在TextBox中按下回车键时执行按钮事件
能看代码的CrackLibby
06-17 1895
http://www.cnblogs.com/sunnycoder/archive/2010/08/10/1796373.html 引言 在ASP.NET页面中，经常会遇到在TextBox中输入完成数据后，点击一个按钮执行一些操作。而作为用户，大都希望按下回车键便捷地完成这个操作，而不是每次输入完数据后，都需要使用鼠标来点击按钮。 本文就将介绍如何简便地完成将Te
html之文本框的onkeydown()响应Enter键——键盘事件
程序羊的博客
10-18 9003
事件目录常见的jQuery事件常见的鼠标、键盘事件 很多时候，我们需要在html的输入框中按下回车键（Enter）做模糊查找，那么就可以使用到 onkeydown 事件了。 示例代码： <html> <body> <input onkeydown="if(event.keyCode==13) {test()}"/> <script> fun...
HTML页面实现enter(回车)键自动登录操作
Healer_小振的博客
11-17 1万+
方法一: onkeydown="if(event.keyCode==13) document.all.login.click()" 注:【login】：登录按钮id属性 方法二 : 添加JS绑定,【login】为登录按钮id属性 <script> $(document).keydown(function(event){ if(event.keyCode==13){ document.getElementById("login")...
HTML运行到浏览器自动刷新,【报Bug】html 在内置web浏览器预览时，自动刷新
weixin_34089871的博客
06-02 214
下面代码在Chrome 和 IE 下没有问题11111221312var isSupportFontFamily = function(f) {// f是要检测的字体if (typeof f != "string") {return false}// h是基础字体var h = "Arial";if (f.toLowerCase() == h.toLowerCase()) {retur...
HTML - 输入框 Input 按回车 Enter 自动刷新页面解决方案
牧码的博客
08-24 7464
背景 最近加入了一套回车自动查询的方法，好几个界面都加好了，可是就是有一个界面的回车事件总是不生效并且似乎还自动刷新了整个界面。 $("input[name='projectName']").keyup(function(){ if(event.keyCode == 13){ reloadGrid(); // 自己封装的方法 } }); 分析 ...
html文本框按回车相当于点击某个按钮
tan0303的专栏
06-28 6791
要实现的功能描述：html写的文本框，当输入完内容后按键盘上的回车等效于文本框对应的按钮。实现代码：onkeypress=if(event.keyCode==13) document.getElementById(/"ToSearch/").click()注释：“ToSearch”：按钮的ID。
HTML防止input回车提交表单
热门推荐
李刚的学习专栏
03-28 4万+
最近在做一个小需求时，发现了一个问题：当form表单中，存在一个button，在input中按回车会自动触发form提交，很是郁闷，经过查询资料，特总结如下： 自动提交情况说明： 1.默认情况下，单个输入框，无论按钮的type="submit"还是type="button"类型，回车即提交。 2.当type="submit"时，无论有几个type="text"输入框，回车均表示提交。
html回车按键确认按钮,button默认enter事件(回车事件)。
weixin_34547317的博客
06-05 3118
这里我介绍一下，button按钮默认回车(enter)事件。如果大家可以用submit，就不用看以下代码，因为submit可以直接默认回车事件(enter)。在这里特此声明，代码是通过jquery完成。实列代码我亲自写的，完全可以实现，只要复制过去就可以用，但是必须导入jquery包。着个方法支持ie与火狐，绝对好使。我在做的时候在网上找了一些代码，基本全不支持火狐。好了，废话也说了不少了。开始代...
<转>键盘回车事件导致页面刷新的问题
攻城记
10-22 426
一个 Ajax 查询的功能，代码如下： &lt;form name="keywordForm" method="post" action=""&gt; &lt;p id="profile_nav"&gt; &lt;label for="profile"&gt; 关键字搜索： &lt;/label&gt; &lt;i
为什么form表单里面的button点击的时候还没验证表单就刷新页面了
05-27
这种情况可能是由于button按钮的默认行为引起的。在HTML中，button元素有一个默认的type属性值为"submit"，所以当用户点击按钮时，会触发表单的提交事件，即使表单中的输入验证尚未完成，也会提交表单并刷新页面。 为了解决这个问题，可以将button元素的type属性设置为"button"，而不是默认的"submit"，这样就可以阻止默认的表单提交行为，等待表单验证通过后再提交。 例如： ```html <form> <input type="text" required> <button type="button" onclick="submitForm()">提交</button> </form> <script> function submitForm() { if (document.querySelector('form').checkValidity()) { // 如果表单验证通过，则提交表单 document.querySelector('form').submit(); } else { // 如果表单验证未通过，则给出提示信息 alert('请填写必填项'); } } </script> ``` 在上面的示例中，我们将button元素的type属性设置为"button"，并在点击事件中手动提交表单并执行表单验证。如果表单验证未通过，则给出提示信息，否则提交表单。这样就可以避免在表单验证未通过时提交表单并刷新页面的问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值