input键盘回车事件导致页面刷新的问题，地址栏多了一个问号

最新推荐文章于 2023-11-28 17:18:24 发布
最新推荐文章于 2023-11-28 17:18:24 发布
阅读量958 收藏 2
点赞数 3
分类专栏： html 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/html_tangkai/article/details/108469745
版权

最近在项目中遇到了个问题

在表单里input框获取焦点时，键盘回车事件会导致页面刷新的问题，路由多了一个问号。
http://localhost:8080/?#/house/list

奇怪的是另一个页面同样的写法却没这个问题，比较了下，出问题的页面form里只有一个input，没问题的页面form有多个input

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

实测没有效果，最终解决方案是，增加一个隐藏的input框

<input type="text" style="display:none">
html_tangkai
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue解决微信浏览器input关闭键盘后导致页面底部空缺的问题
01-08
是微信webview打开我们h5页面的时候，就固定了页面的高度，如果这个input在页面的底部，当唤起软键盘的时候，由于高度问题，整个webview会被键盘顶上去，，而取消的时候没有恢复原状。 解决办法 第一种：失去焦点后...
解决Android软键盘弹出覆盖h5页面输入框问题
01-20
1.发现问题：当前页面中box为flex布局，内容为上下固定高，中间自适应（中间区域内容过多会出现滚动条，input框在wrapper的底部），input获取焦点，手机键盘弹出，input未上移到可视区内，怀疑是flex布局导致。...
vue 键盘回车事件导致页面刷新的问题，路由多了一个问号
hlpp123的博客
03-23 1868
问题： form表单只有一个搜索框的时候，输入完信息按回车的时候页面刷新，路由后面增加了一个问号 http://localhost:9527/user? 解决方案 el-from 加上 @submit.native.prevent <el-form @submit.native.prevent> </el-form> 原因： 当form 表单只有一个input 框时，按回车键，默认是提交表单，想要阻止这个动作， 在form表单上面加上提交的阻止事件即可 ...
vue input 监听键盘回车事件
Now_li的博客
01-06 927
vue input 键盘回车事件
element Form当el-input有焦点时，按下回车会发生页面刷新事件
shidouyu的专栏
09-10 296
问题描述：在提交某项业务时，需要输入一次密码，点击下方确定后提交，但是当el-input有焦点时，按下回车会发生页面刷新事件，url中的参数也被清空。 代码如下： <div class="password ft12"> <el-form> <el-form-item label="密码：" label-width="95px" prop="password" class="password"> <el-input clas...
键盘回车触发事件
qq_41373328的博客
12-07 1041
键盘回车触发事件： $('#workSheetCode').bind('keyup', function(event) { if (event.keyCode == "13") { init(); } });
el-form表单按回车键后页面刷新并且URL上面多了一个问号
m0_46938695的博客
04-16 939
当表单中只有一个输入框的时候，输入数据按下回车键，页面会刷新，并在url上面多出一个问号，导致页面错误。 解决方案： 在el-form上面加上@submit.native.prevent 原因分析： form 元素中只有一个输入框时，在该输入框中按下回车默认是提交该表单。我们需要阻止这一默认行为。 <el-dialog class="unilumin-dialog" :t...
解决vue+element 键盘回车事件导致页面刷新的问题
01-19
今天发现输入框输入内容后回车就会刷新页面 解决 el-from 加上 @submit.native.prevent 具体是参考element-ui文档解决的 W3C 标准中有如下规定： When there is only one single-line text input field in a ...
jQuery实现给input绑定回车事件的方法
01-19
本文实例讲述了jQuery实现给input绑定回车事件的方法。分享给大家供大家参考，具体如下： [removed][removed] [removed] $(function(){ $('#dataInput').bind('keypress',function(event){ if(event.keyCode == ...
angularjs中回车键触发某一事件的方法
12-03
要求：在输入框中输入值以后，按回车键触发某一事件的执行 html： <input id="input" name="input" ng-model="querykdUser.page.pageSize" ng-keyup="myKeyup($event)" class="form-control" style="width:60px;...
el-form按回车键URL出现问号?
weixin_43407997的博客
01-31 352
el-form按回车键URL出现问号 阻止表单默认提交
vue 中input键盘回车事件查询导致页面刷新的问题，路由多了一个问号
yijiupingfan0914的博客
04-02 865
问题： <el-form @submit.native.prevent> <el-form-item > <el-input @keyup.enter.native="handleInputConfirm(obj)" > </el-input> </el-form-it...
vue 表单输入框按下回车键页面刷新 地址出现问号问题
Damon99999的博客
03-03 892
表单输入框：回车后，重新刷新了页面，并且路由多了一个问号（且表单只有一个输入项情况） 解决方案：el-from 加上 @submit.native.prevent eg：<el-form @submit.native.prevent> </el-form> 确切原因还在挖掘，有知道的朋友请不吝赐教，谢谢啦 ...
vue在form表单的输入框中按下回车后，地址栏的URL发生改变
weixin_45899022的博客
07-07 1201
https://www.jianshu.com/p/a7b978eaac35
localhost链接出现问号？
weixin_45267223的博客
08-14 179
localhost链接出现问号？ 主要是将登录按钮中的type错写成submit，应该改为button
input text文本框加了回车事件后无法跳转页面
weixin_44561961的博客
03-14 652
回车的时候同时触发了表单提交事件，在回车事件里面写一个：return false; 例如： $(function(){ $(’.rm-search’).bind(“keypress”,function(event){ 　if(event.keyCode==13){ window.location.href=“search.html” 　return false; 　} }); }) ...
elementUI中input回车触发页面刷新,路由多了一个问号 问题和解决方法
最新发布
王宏涛的博客
11-28 583
elementUI中input回车触发页面刷新,路由多了一个问号 问题和解决方法
【input输入框回车生成标签】vue简单实现input输入框内输入后回车创建一个标签功能【详细注释版本】
seeeeeeeeeee的博客
08-04 5377
这个功能很多地方会用到，比如我们的csdn发文章发问题就用到了这个功能。一个输入框内输入你想要的标签，然后回车就会创建出来一个标签，这个标签也是在这个输入框的里面的。我网上看了下，这种功能帖子没看到几个，这里就整理一下，写一个帖子。......
element 表格里的input点击回车聚焦下个input，并选中框内的内容
02-05 1172
vue中template里面的内容 <el-table :data="row" ref="singleTable" stripe style="width: 100%" highlight-current-row @current-change="handleCurrentChange1"> <el-table-column prop="ID" label="订...
element el-input 键盘回车事件
07-12
在Element UI的el-input组件中，可以通过监听键盘事件来实现回车事件的处理。你可以使用@keyup.enter修饰符来监听键盘的回车键按下事件。下面是一个示例代码： ```html <template> <div> <el-input v-model="inputValue" @keyup.enter="handleEnter"></el-input> </div> </template> <script> export default { data() { return { inputValue: '' }; }, methods: { handleEnter() { // 处理回车事件的逻辑 console.log('回车键被按下'); } } }; </script> ``` 在上述示例中，el-input绑定了v-model指令，用于双向绑定输入框的值。同时，通过@keyup.enter事件监听器，可以监听到用户按下回车键的事件，并触发handleEnter方法来处理回车事件的逻辑。你可以根据实际需求，在handleEnter方法中编写自己的业务逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值