form表单中当有input时候,按下回车刷新页面的问题

最新推荐文章于 2024-08-13 10:33:00 发布
最新推荐文章于 2024-08-13 10:33:00 发布
阅读量520 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47929185/article/details/115934225
版权

通过页面发现：

页面中的form表单只有一个input框按回车键页面会自动刷新
页面中没有form表单只有一个input框按Enter键不会刷新

方法1：

在文本域元素中加入onkeydown或者onkeypress事件，判断若用户点击了回车就阻止默认行为

<body>
     <form>
           <input  type="text"  onkeypress="if(event.keyCode==13 || event.which==13){return false;}" />
     </form>
</body>

方法2：

在form中再加入一个隐藏的文本域

<input type="text" name="test" style="display:none"/>

当在Vue引用element-ui时候
键盘回车刷新是因为默认执行提交事件，在el-form标签中设置属性@submit.native.prevent，即可。解决办法如下：

<el-form
  @submit.native.prevent
  size="mini"
  :inline="true"
  ref="searchForm"
  :model="searchForm"
  label-width="80px"
>
  <el-form-item label="角色名称：">
    <el-input
      v-model="searchForm.name"
       @keyup.enter.native="searchSubmit"
      placeholder="请输入角色名称"
      clearable
    ></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="searchSubmit">查询</el-button>
  </el-form-item>
</el-form>

el-form-item标签中 @keyup.enter.native=“searchSubmit” 表示回车执行searchSubmit()事件

方法3：
添加一个隐藏的input框

<input type="text" style="display:none;" />
房东的猫__
关注
Vue.js：element-ui组件库el-form表单el-input输入框按下回车键会刷新页面的问题
彭世瑜的博客
04-29 1346
当form表单中只有一个input时，按下回车建会自动触发页面的提交功能， 产生刷新页面的行为 <el-input v-model="value" @keyup.enter.native="handleEnter"/> 需要在el-form 中阻止表单的默认提交行为 <el-form @submit.native.prevent> <el-input v-model="value" @keyup.enter.native="handleEnter"/> <
form表单中只有一个input时，按回车键后表单自动提交(form表单的一个小坑)
Hurricane_m的博客
05-27 1258
最近在给公司改项目时发现一个问题，按钮绑定回车事件后按回车表单执行js方法后表单自动提交刷新，先执行了js的方法后自动提交表单，使它相当于没有执行js方法，查阅资料得知在一个form表单中，若只有一个input，按回车键表单会自动提交，但是当表单中存在多个input时，按回车键不会执行任何操作，这是form表单的一个特性。 解决这个问题有四种方法，如下： 第一种方法，把表单去掉，这是最管用，但...
关于输入框按回车自动刷新页面的4个解决方案
逆风的蔷薇
02-02 1308
解决方案 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ο...
el-form表单输入框回车事件导致页面刷新问题解决
最新发布
q1740706590的博客
08-13 525
在项目中使用form表单时只有一个输入框，输入框绑定了回车触发提交事件，但输入内容按回车时并未执行事件函数，反而刷新页面。
input回车事件未实现但页面刷新
yehaifanxing的专栏
03-14 5079
input 的回车事件不运行，刷新当前页面
form表单中input获得焦点 点击回车刷新页面的解决
m0_52171520的博客
12-10 788
有些时候我们在form表单的中，鼠标放在input框的时候，点击回车键会出现刷新页面的情况，原因：当我们点击回车的时候自动提交数据，并刷新页面。 解决办法:1.在form中添加事件 … 解决办法:2.增加一个隐藏的输入框,改变单个输入框(变成多个input框，让系统认为多个输入框) eg: 3.屏蔽回车键 1> 全局去掉回车事件的方法 function document.onkeydown() { var e = event.srcElement; if (event.keyCode == 13)
关于 form 表单回车自动刷新
ljqscdnljq的博客
03-10 445
form 表单，在只有一个输入框的时候，在点击回车时，就会触发表单的提交，而 form 若没有 url，则提交后就会刷新页面，导致跳转。本文转载自：https://www.cnblogs.com/ljwsyt/p/11211826.html。知道原因后，可以采用增加一个隐藏输入框的方法，避免回车提交。form 表单，输入框聚焦后，回车，页面刷新跳转。
JSP中的FORM表单中只有一个input文本时，按回车键将会自动提交表单
01-08
在JSP中，当一个FORM表单中只有一个INPUT文本输入框时，用户按下回车键，浏览器会默认触发表单的提交动作。这是因为浏览器的默认行为：在一个只有一个单行文本输入域（type="text"）的表单里，按下回车键会模拟点击...
如何防止INPUT按回车自动提交表单FORM
11-29
如果表单中有多个`<input>`元素（包括隐藏的`<input>`），则浏览器不会在回车键被按下时自动提交表单。这是因为浏览器认为用户可能需要在其他输入框中输入数据，所以它等待用户完成所有输入后再提交表单。例如： ```...
el-form表单，按下回车后刷新页面的问题
猿始森林
03-29 625
当你的表单只有一项时，按下回车默认会提交表单，所以会出现刷新页面的现象。如上，指定回车或提交的事件，就可以避免刷新页面的问题。
el-form表单-解决按下回车页面刷新
m0_65039133的博客
06-12 717
刷新原因：在element-ui中，el-form中只有一个el-input时，按下回车会刷新页面。解决办法：给el-form添加@submit.native.prevent属性。
Form表单回车刷新问题
weixin_30653097的博客
08-22 238
症状： 　　当一个form表单内只有一个文本输入框时，当我们按下回车键会自动刷新页面内容，现象代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=...
【记录】解决前端form表单回车禁止刷新页面
weixin_30699831的博客
08-30 618
最近弄前端 有form表单的情况下 按回车会自动刷新当前页面。 现记录解决方案如下： 1.去掉表单 2.不要让表单中只有一个文本框(增加一个隐藏的文本框就行) 3.以上两点都不想使用,那么就还可以在表单后面加上一个onsubmit事件,返回false.阻止form提交. onsubmit="return false;" 转载于:https://...
如何防止input回车造成提交表单
Lik1024
05-30 253
在form表单或input中加入：onkeydown="if(event.keyCode==13){returnfalse;}"
Form表单的输入框按Enter后，页面被刷新了
莫负时光
10-23 1380
Form表单的输入框按Enter后，页面被刷新了   今天下午在实现一个通过在输入框按回车触发发送查询请求的前端实现，遇到了一个问题。整个表单非常的简单，一个输入框和一个按钮，点击按钮会触发绑定的提交的处理逻辑。在输入框中，按了回车，页面会被刷新了，导致页面回到了首页。Debug了一下，绑定的回车时间的代码是进去了，以及提交的处理逻辑也走完，但是就是会被刷新。一直觉得是否有什么地方，绑了什么事件，...
给input框加回车事件不能跳转的问题
yc950208的博客
08-13 1214
在form表单里,给input框加回车事件后,本想要获取input框的内容,然后进行跳转,可是并没有跳转而是将input框的内容传到了地址栏当参数,这样就是表单默认提交了..这种问题只出现在form表单里只有一个input框,两个就不默认提交,这里用到了百度到的一个解决办法::再加一个input框并隐藏,,切记不能用type="hidden",如下:::  ...
回车提交表单input框的输入内容
04-25 288
代码如下： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> ...
Form表单 回车(Enter)提交表单问题
qq_37609418的博客
06-15 8291
在Form表单中input会自动响应回车事件。这是表单的默认提交动作。表单的提交行为，可以用两种方式定义，一是form表单自身，二是form表单的button元素(包括type='submit’的input标签，以及type=‘submit’的button元素，button元素type为Submit)。而点击Enter键会触发form表单提交。这被称为隐式提交，如果要阻止回车键提交表单，可以在form标签内添加如下代码 ng-keydown 指令不会覆盖元素的原生 onkeydown 事件, 事件触发时，n
input输入框按回车键提交表单问题
热门推荐
蓝沐的博客
03-16 1万+
今天发现一个奇怪的问题，当页面只有一个input文本框（type="text"）时，将鼠标焦点置于这个文本框，然后按回车键（enter键）时会提交表单数据。查了一下，原来这是浏览器的默认行为，当form中只有一个input文本框（type="text"）时，用户按回车键会提交这个form表单。从这句话中我们就可以得到产生这种行为的条件就是（1）form中只有一个文本框。（2）用户在文本框中...
禁止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、付费专栏及课程。

余额充值