`

elementUi 键盘回车事件导致页面刷新的问题

    博客分类:
  • Vue
 
阅读更多
在使用elementUi form表单时,一般会这么写

<el-form>
  <el-input v-model="params.taskName" @keyup.enter.native="enterKey" @clear="clearTaskName" clearable></el-input>
</el-form>
在 input中加上@keyup.enter.native 就可以使用回车事件
但是会发现有时候,第一次回车就会刷新页面,再次回车,才出发回车事件。

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


调整后的代码如下:

<el-form
@submit.native.prevent>
  <el-input v-model="params.taskName" @keyup.enter.native="enterKey" @clear="clearTaskName" clearable></el-input>
</el-form>


(form只有一个元素,会出现上述问题且提交url会显示问号,必须用上述办法解决)





分享到:
评论

相关推荐

    解决vue+element 键盘回车事件导致页面刷新的问题

    通过上述方法,就可以在Vue+Element UI开发的项目中,成功地阻止键盘回车事件导致的页面刷新问题。在实现自定义事件处理的同时,不破坏用户在使用回车键提交表单时的自然体验。希望这篇文章能对遇到此类问题的开发者...

    js键盘回车事件

    js键盘回车事件,下载即可用,简单实用...

    Android 监听键盘回车键事件

    我们在android手机上面有时候会遇到监听手机软键盘按键的时候,例如:我们在浏览器输入url完毕后可以点击软键盘右下角的“GO”按键加载url页面;在点击搜索框的时候,点击右下角的search符号键可以进行搜索;或者在...

    在ALV里编写回车事件

    ### 在ALV里编写回车事件 #### 一、引言 在开发基于ABAP的业务应用程序时,经常需要处理用户界面(UI)中的各种事件,以实现与用户的交互。其中,ALV(Application List Viewer)是SAP ABAP平台上一个强大的列表...

    避免回车键导致的页面无意义刷新的解决方法

    在网页开发中,用户在文本框输入内容后按下回车键通常会触发表单的提交动作,如果这个表单没有明确的处理逻辑,就会导致整个页面的刷新,这对于实现局部刷新或者期望通过Ajax进行无刷新操作的场景来说是不希望看到的...

    js回车事件判断

    在探讨“js回车事件判断”这一主题时,我们首先需要理解JavaScript中如何捕捉和响应键盘事件,尤其是回车键的触发。JavaScript提供了强大的事件处理机制,使得开发者能够精细地控制用户与网页的交互方式。当涉及到...

    js回车事件绑定.txt

    1. **性能问题**:频繁地监听键盘事件可能会对页面性能造成一定影响,尤其是当页面中有大量输入框时。 2. **用户体验**:确保用户能够通过其他方式(如点击按钮)触发相同的功能,避免只依赖键盘操作导致部分用户的...

    MFC EDIT 回车事件响应之 OnChar() 实现的DOME MFC_EDIT_OnChar.rar

    在MFC中,`OnChar`函数是处理键盘输入事件的关键,特别是针对特定字符的输入,如回车键。当用户按下键盘上的某个键时,Windows会发送一个消息到应用程序,这个消息通常包含按下的键的ASCII码或虚拟键码。`OnChar`...

    asp.net 文本框回车事件

    在ASP.NET中,默认情况下,当用户在一个文本框中按下回车键时,如果页面上存在按钮,则会触发页面上第一个按钮的点击事件。这种行为有时并不符合我们的需求,例如: - 我们可能希望在用户完成某个特定文本框的输入后...

    Excel表中响应回车事件

    在Excel表格中,直接通过内置功能无法监听或响应单元格中的回车事件,因为Excel的VBA(Visual Basic for Applications)编程环境中并没有直接提供这样的事件处理程序。但是,我们可以利用VBA来创建一个变通的方法来...

    jquery 监听 键盘 事件

    有时我们可能希望阻止键盘事件的默认行为,比如阻止回车键提交表单。可以使用`event.preventDefault()`来实现: ```javascript $('input').on('keydown', function(event) { if (event.keyCode === 13) { // Enter...

    vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native|vue-50056.pdf

    本文将深入探讨如何使用Vue的`@keyup`指令来监听键盘回车事件,并了解Vue提供的键盘修饰符及其用法。 首先,让我们关注标题中提到的`@keyup.enter`。这是Vue为简化键盘事件处理而引入的一种语法糖。当你想在用户按...

    C#键盘输入回车键实现点击按钮效果的方法

    总之,通过设置`KeyPreview`属性,添加键盘事件处理程序,并在事件处理器中检测回车键,我们可以轻松地在C#窗体应用中实现用回车键代替点击按钮的功能,提高用户体验。这个技巧在各种用户界面设计中都非常实用,尤其...

    layer弹窗在键盘按回车将反复刷新的实现方法

    但有时候可能会出现按回车键导致页面刷新的bug。为了解决这个问题,需要对layer弹窗中的键盘事件进行适当的处理。 首先,需要理解`layer.open`方法。这是一个函数,用于生成一个layer弹窗。这个方法在调用后会返回...

    Asp.net的TextBox回车触发事件

    可以通过JavaScript来监听键盘事件,并检查用户是否按下了回车键。下面是一个具体的实现示例: ```html function EnterTextBox() { if (event.keyCode == 13 && document.all["TextBox1"].value != "") { event...

    textbox 回车执行事件

    4. **防止重复提交**:需要注意的是,如果页面上有多个回车可触发的事件,可能会导致重复提交。因此,添加适当的逻辑来防止这种行为是必要的,例如设置一个标志变量或使用锁。 以上就是在ASP.NET中实现“textbox ...

    【JavaScript源代码】一篇文章教你实现VUE多个DIV,button绑定回车事件.docx

    尽管这样可以捕获回车事件,但它会成为全局事件,导致在整个应用中按下回车键都会触发这个事件,这并不是我们想要的结果。 为了解决这个问题,文章提出了一个更具体且可控的解决方案: 1. 在确认按钮和取消按钮...

    用js来刷新当前页面保留参数的具体实现

    解决这个问题的一个方法是使用location.replace()方法,因为每次使用replace()方法时,都会在服务器端重新生成页面,相当于用户在浏览器地址栏输入URL并回车访问,从而避免了Session的问题。 总结来说,当我们需要...

    vb键盘记录和截屏,可以记录键盘事件以及回车事件时的屏幕状态

    标题 "vb键盘记录和截屏" 描述了一个VB(Visual Basic)程序,它具有两个主要功能:一是记录键盘事件,二是捕获回车键按下时的屏幕截图。这两个功能在IT领域有着广泛的应用,比如系统监控、软件测试、用户行为分析等...

Global site tag (gtag.js) - Google Analytics