<转>键盘回车事件导致页面刷新的问题

本文介绍了解决Ajax搜索功能中表单回车导致页面刷新的问题,提供了多种解决方案,包括添加隐藏文本框、阻止表单默认提交等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我最近在做一个 Ajax 查询的功能,代码如下:

1 <form name="keywordForm" method="post" action="">  
2 <p id="profile_nav">  
3 <label for="profile"> 关键字搜索: </label>  
4 <input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" />  
5 <input type="button" value="搜索" onClick="searchKeyword()">  
6 </p
7 </form>

在文本框中输入关键字按回车,页面自动刷新了,结果肯定是没有实现无刷新搜索了。想了想,可能是按回车后默认提交了表单,于是将form去掉,果然不刷了。但是还是会有很多地方需要用到form。

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

既然是只有一个文本框才会出问题,那么可以加一个隐藏的文本框,如下:

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

现在代码成了这样:

1 <form name="keywordForm" method="post" action="">  
2 <p id="profile_nav">  
3 <label for="profile"> 关键字搜索: </label>  
4 <input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" />  
5 <input id="hiddenText" type="text" style="display:none" onkeypress="searchKeywordKeyboard(event)" />
6 <input type="button" value="搜索" onClick="searchKeyword()">  
7 </p
8 </form>

结论是,可以采取两种方法解决这种问题:1.去掉表单;2.如果非得用表单,只要不让表单里有且只有一个文本框就OK了。

如果以上的方法还不足以让你去解决问题,那么你可以用以下方法来阻止因为回车而引起的表单自动提交:

1 <form name="keywordForm" method="post" action="" onsubmit="return false;">  
2 <p id="profile_nav">  
3 <label for="profile"> 关键字搜索: </label>  
4 <input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" />  
5 <input id="hiddenText" type="text" style="display:none" onkeypress="searchKeywordKeyboard(event)" />
6 <input type="button" value="搜索" onClick="searchKeyword()">  
7 </p
8 </form>

就是在表单 form 后面加上一个 onsubmit 事件,返回 false,来阻止 form 提交。

### 解决方案 在 Vue 和 Element UI 中,`<el-input-number>` 组件的回车键触发页面刷新问题主要是由于浏览器默认的行为引起的。当 `<form>` 表单中的输入框获取焦点并按下回车键时,默认会触发表单提交操作,从而导致页面刷新。 为了阻止这种默认行为,可以采取以下方法: #### 方法一:通过监听 `@keyup.enter.native` 事件 可以在 `<el-input-number>` 上绑定一个自定义的方法来处理回车事件,并调用 `event.preventDefault()` 来阻止默认行为[^1]。 以下是具体实现代码: ```vue <template> <div> <el-input-number v-model="value" @keyup.enter.native="handleEnterKey" ></el-input-number> </div> </template> <script> export default { data() { return { value: 0, }; }, methods: { handleEnterKey(event) { event.preventDefault(); // 阻止默认行为 console.log('回车键被按下'); }, }, }; </script> ``` #### 方法二:禁用表单的默认提交行为 如果 `<el-input-number>` 是嵌套在一个 `<el-form>` 或其他形式的 HTML 表单中,则可以通过为表单添加 `@submit.native.prevent` 属性来阻止整个表单的默认提交行为[^4]。 示例代码如下: ```vue <template> <el-form @submit.native.prevent> <el-input-number v-model="value" ></el-input-number> </el-form> </template> <script> export default { data() { return { value: 0, }; }, }; </script> ``` #### 方法三:单独使用 `v-on:keydown` 处理按键事件 另一种方式是直接捕获键盘事件并通过条件判断拦截回车键的操作[^5]。 代码示例如下: ```vue <template> <el-input-number v-model="value" @keydown.native="onKeyDown" ></el-input-number> </template> <script> export default { data() { return { value: 0, }; }, methods: { onKeyDown(event) { if (event.key === 'Enter') { event.preventDefault(); console.log('已阻止回车键的默认行为'); } }, }, }; </script> ``` --- ### 总结 以上三种方法都可以有效解决 `<el-input-number>` 在删除值后按回车导致页面刷新问题。推荐优先尝试 **方法二**,因为它不仅简单易懂,还能全局控制表单内的所有输入组件行为。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值