【记录】解决前端form表单回车禁止刷新页面

最新推荐文章于 2024-03-29 11:23:18 发布
最新推荐文章于 2024-03-29 11:23:18 发布
阅读量611 收藏
点赞数
文章标签： 前端 javascript ViewUI
原文链接：http://www.cnblogs.com/wbl001/p/11436457.html
版权

 

最近弄前端 有form表单的情况下 按回车会自动刷新当前页面。

现记录解决方案如下：

1.去掉表单

2.不要让表单中只有一个文本框(增加一个隐藏的文本框就行)

3.以上两点都不想使用,那么就还可以在表单后面加上一个onsubmit事件,返回false.阻止form提交.  οnsubmit="return false;"

 

转载于:https://www.cnblogs.com/wbl001/p/11436457.html

weixin_30699831
关注
antd v3.x版本-提交表单时阻止刷新页面
weixin_43758377的博客
04-20 663
低版本的antd提交表单时，会刷新页面 antd 版本3.x在提交表单时，会刷新页面（看代码如下），怎么处理 function myComp ({form}){ handleSubmit = (e) => { console.log(e) } render () { return (<Form onSubmit={handleSubmit}> <Form.item name="abc"> <Input /> </Form.i
form表单提交，回车+搜索按钮执行提交时禁止刷新页面
Orlando321的博客
03-16 563
1、form表单提交时刷新页面，是正常行为，想要禁止，应在form标签加入代码： <form onsubmit="return false;"> </form> 2、input+button组合时： <form onsubmit="return false;"> <input type="text"> <button...
真 · vue中，input、form中回车提交但不刷新页面的解决方案！
不甘于现状のKK
12-21 1367
项目需要，找了两个多小时资料，可算把这个问题解决了。某度某区某DN有许多解决方案，但是还是解决不了项目的问题。 所以从表单提交源头解决。废话不多说： 解决方法有三种，如果你有两个以上的提交事件或者两个以上文本框，可直接拉到"解决办法三"查看。 解决方法一： 只有一个表单提交 <form @submit.prevent> <!-- 表单内容 --> </form> 解决方法一： 如果有表单提交需要 <form @submit="search"> &l.
HTML form表单如何实现 回车或者点击按钮，表单提交并且页面不刷新
热爱编程，热爱技术
04-03 1273
使用&#26631;&#31614;&#65292;&#23558;&#25552;&#20132;&#30340;&#34920;&#21333;&#25968;&#25454;&#25552;&#20132;&#21040;iframe&#37324;&#38754;...
阻止form表单回车提交刷新页面
做一个有知识的流氓
10-31 658
【代码】阻止form表单回车提交刷新页面。
bootstrap表单按回车会自动刷新页面的解决办法
08-31
Bootstrap表单按回车会自动刷新页面的问题可以通过将form标签换成div标签和使用JavaScript来捕捉回车键的事件来解决。这可以让我们更好地控制表单的提交行为，并提供更好的用户体验。 相关知识点： * Bootstrap...
没有form表单情况下敲回车键提交表单的js代码
10-29
总结起来，在没有form标签的表单情况下，想要通过回车键提交表单，可以通过JavaScript来实现。主要步骤包括定义键盘事件处理函数，捕捉回车键事件，并调用一个模拟登录验证的函数。同时，随着Ajax技术的普及，客户端...
jQuery实现form表单基于ajax无刷新提交方法详解
10-23
jQuery 实现 form 表单基于 AJAX 无刷新提交是一种常见的前端技术，它允许用户在不刷新整个页面的情况下发送数据到服务器并接收响应。这提高了用户体验，因为页面的其他部分可以保持活动状态，而不会打断用户的操作...
jquery实现form表单提交后局部刷新页面的多种方法
sajiazaici的博客
08-28 8245
最近做一个小项目，刚好需要用到搜索功能，实现搜索框内输入数据然后按回车或者点击“提交”，然后给后台数据库处理并返回数据给前端，在前端局部更新数据。 比如这样的：但是遇到了一个小问题，就是form表单下任意输入框输入完按回车提交，整个页面都会刷新，就算我用ajax从后台取出数据返回前端把页面更新了，整个页面还是会立马刷新成原来的样子。 所以问题又回到了最开始，就是form表单如何实现按回车提交数据处
jquery表单form提交阻止页面全部刷新
我的博客
08-21 4501
首先明确一点：form表单下，如果是针对form元素进行提交，整个页面都会刷新。 所以出现的问题是：当用户往输入框内输入内容分后，按回车或者点击提交按钮，往当前页面输出内容的局部刷新会被之后的整个页面刷新给刷掉。 为了阻止整个页面刷新而保留局部刷新，我们可以使用以下方法： 方法一：（推荐）在js里form表单用submit()，最后return false &lt;script type=...
如何阻止 form 表单提交后刷新页面？
qq_40147756的博客
12-27 799
如何阻止 form 表单提交后刷新页面？
Form表单回车刷新问题
weixin_30653097的博客
08-22 232
症状： 　　当一个form表单内只有一个文本输入框时，当我们按下回车键会自动刷新页面内容，现象代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=...
如何避免form表单内点击button按钮导致页面刷新？解决方案大揭秘！
weixin_50407990的博客
03-24 2756
在Web开发中，我们经常会使用form表单来收集用户提交的数据，但是有时候在form表单内点击button按钮会导致页面刷新，这对用户体验来说是十分不友好的。默认情况下，form表单内的button按钮的type属性为submit，也就是说，当用户点击这个按钮时，会自动将表单内的数据提交到后台处理。通过本文的介绍，我们了解了form表单内点击button按钮会刷新页面的原因，并掌握了两种避免刷新页面的方法。除了表单提交按钮的默认行为会刷新页面，还有一些其他情况也会导致页面的刷新。
关于 form 表单回车自动刷新
ljqscdnljq的博客
03-10 440
form 表单，在只有一个输入框的时候，在点击回车时，就会触发表单的提交，而 form 若没有 url，则提交后就会刷新页面，导致跳转。本文转载自：https://www.cnblogs.com/ljwsyt/p/11211826.html。知道原因后，可以采用增加一个隐藏输入框的方法，避免回车提交。form 表单，输入框聚焦后，回车，页面刷新跳转。
el-form表单，按下回车后刷新页面的问题
猿始森林
03-29 596
当你的表单只有一项时，按下回车默认会提交表单，所以会出现刷新页面的现象。如上，指定回车或提交的事件，就可以避免刷新页面的问题。
el-form表单-解决按下回车页面刷新
m0_65039133的博客
06-12 695
刷新原因：在element-ui中，el-form中只有一个el-input时，按下回车会刷新页面。解决办法：给el-form添加@submit.native.prevent属性。
form表单中当有input时候,按下回车刷新页面的问题
weixin_47929185的博客
04-21 516
标题 form表单中当有input时候,按下回车刷新页面的问题 通过页面发现： 页面中的form表单只有一个input框按回车键页面会自动刷新 页面中没有form表单只有一个input框按Enter键不会刷新 方法1： 在文本域元素中加入onkeydown或者onkeypress事件，判断若用户点击了回车就阻止默认行为 <body> <form> <input type="text" onkeypress="if(event.keyCode=
关于输入框按回车自动刷新页面的4个解决方案
逆风的蔷薇
02-02 1301
解决方案 1、直接去除掉form表单，当然这是最简单粗暴的方法。 2、如果一个input会自动提交，那么比较容易想到的是再加一个input。值得注意的是 这里的input不能设置type为hidden，这样一样是不生效的，form一样会认为只有一个input。需要设置成<input type="text" class="form-control" style="display:none">。 3、给input加上回车事件直接return false。在input加上οnkeydο...
禁止form表单 回车刷新页面
最新发布
06-25
为了防止用户在表单提交时通过回车键直接刷新页面，可以在表单元素上添加事件处理程序，通常使用`onkeydown`或`onkeyup`事件来检测回车键的按下。下面是一个简单的HTML和JavaScript示例： ```html <form id="myForm"> <!-- 表单内容 --> <input type="text" name="inputField" onkeydown="return preventEnterSubmit(event)"> <button type="submit">提交</button> </form> <script> function preventEnterSubmit(event) { // 检查是否按下了回车键 if (event.key === "Enter") { // 阻止默认的表单提交行为（刷新页面） event.preventDefault(); // 替换为其他行为，例如调用提交函数或显示提示 console.log("回车键被阻止，请输入其他方式提交或确认"); } } </script> ``` 在这个例子中，当用户按下回车键时，`preventEnterSubmit`函数会被调用，如果当前按键是回车，它会阻止表单的默认提交行为。你可以根据需要替换`console.log`部分的代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值