关于输入框按回车自动刷新页面的4个解决方案

怼烎@ 2022-03-02 09:50 938阅读 0赞

*  ## 起因 ##

最近加入了一套回车自动查询的方法，好几个界面都加好了，可是就是有一个界面的回车事件总是不生效并且似乎还自动刷新了整个界面。

$("input[name='projectName']").keyup(function(){
         if(event.keyCode == 13){
              reloadGrid();
         }
    });

*  ## 分析问题所在 ##

当我删除掉了写的keyup方法之后一样出现了回车自动刷新整个界面的情况，因页面最初不是自己写的，我查询了整个关于这个输入框的绑定事件似乎都没有造成这个情况的可能。

<input type="text" class="form-control" id="projectName" name="projectName" placeholder="请输入项目名称"/>

甚至当我删除掉了id name属性一样会有自动刷新的情况，然后就推断出不是绑定了事件。

然后又想到可不可能是有人写过哪个元素的第几个子元素之类的，我在这个input下面加入了一个新的input。

<input type="text" class="form-control" placeholder="请输入项目名称"/>
    <input type="text" class="form-control" placeholder="wingzing"/>

发现加入了新的input之后，不会出现自动刷新整个页面的情况了，立刻想到是不是这个form表单的原因。

*  ## 原因 ##

**在一个form表单中，若只有一个input，按回车键表单会自动提交，但是当表单中存在多个input时，按回车键不会执行任何操作，这是form表单的一个特性。**

*  ## **解决方案** ##

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οwn="if(event.keyCode==13)\{return false;\} 。

4、直接阻止form表单的提交，在form表单加入οnsubmit="return false;"。

*  ## 后言 ##

开发过程遇到预期之外的问题，可以一步步进行思维的debug 从而逐渐发现问题所在，得知问题发生的原因并给予解决。

### 如果我的这篇文章对你有帮助或者有任何疑点都欢迎在评论区交流！ ###

发表评论取消回复

表情：

评论列表（有 0 条评论，938人围观）

还没有评论，来说两句吧...

相关阅读

相关 4种方法实现输入框按回车自动刷新页面

系列文章目录 -------------------- 文章目录系列文章目录前言一、使用原生 JavaScript 二、使用 Vue

痛定思痛。/ 2023年10月14日 08:46/ 0 赞/ 63 阅读

相关关于HTML Button点击自动刷新页面的问题解决

关于HTML Button点击自动刷新页面的问题解决参考文章： [（1）关于HTML Button点击自动刷新页面的问题解决][1_HTML Button] （2）ht

深藏阁楼爱情的钟/ 2023年02月24日 11:23/ 0 赞/ 3 阅读

相关 antd输入框禁止回车

问题： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

电玩女神/ 2022年11月15日 14:14/ 0 赞/ 423 阅读

相关关于输入框按回车自动刷新页面的4个解决方案

现象：el-input在绑定@keypress.enter.native后，第一次回车时会刷新页面，后面在回车就不会了。原因： > W3C 标准中有如下规定： When

曾经终败给现在/ 2022年10月26日 14:29/ 0 赞/ 496 阅读

相关 input输入框回车事件响应

[input输入框回车事件响应][input] 1.常用方法 ![复制代码][copycode.gif] 　　 1.方法1 $('applyC

女爷i/ 2022年06月16日 09:11/ 0 赞/ 695 阅读

相关 vue+element Form键盘回车事件页面刷新解决

问题描述：如下代码所示，使用element-ui 中的el-form组件对table进行条件查询，当查询条件仅有一项时，使用@keyup.enter.native事件绑定回车事

ゞ浴缸里的玫瑰/ 2022年04月03日 03:45/ 0 赞/ 483 阅读

相关 vue 输入框回车搜索

@keyup.enter="queryAdminRole" <el-input style="width:300px;"

红太狼/ 2022年03月16日 05:28/ 0 赞/ 398 阅读

相关关于输入框按回车自动刷新页面的4个解决方案

起因最近加入了一套回车自动查询的方法，好几个界面都加好了，可是就是有一个界面的回车事件总是不生效并且似乎还自动刷新了整个界面。 $("input[nam

怼烎@/ 2022年03月02日 09:50/ 0 赞/ 939 阅读

相关 vue+element Form键盘回车事件页面刷新解决

当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在标签上添加 @submit.native.prevent。然后

深藏阁楼爱情的钟/ 2022年02月24日 08:16/ 0 赞/ 435 阅读

相关解决Element-UI表单在表单输入框内按回车会触发页面重定向的问题

这几天在用表单的过程中遇到了问题，每当焦点处于input输入框内，按下回车键会触发页面重定向。解决方式： <!-- 在form表单内添加@submit.native...

测试账号/ 2021年01月19日 17:27/ 1 赞/ 746 阅读