element ui中的el-input回车键事件

这篇具有很好参考价值的文章主要介绍了element ui中的el-input回车键事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

今天项目里面的登录页面,需要按键盘回车键就直接登录,但是测试的时候,按了回车键后,直接刷新页面了,这不是我想要的,之后网上查了一下
代码如下:

<el-input v-model="form.biz_user_password" placeholder="请输入新密码" @keyup.enter.native="keyUp('form')"></el-input>

上面的写法没问题,但是这样又会出现一个问题,当form表单中只有一个input框时,按回车键,页面还是刷新的。
之后再查了一下,原来form表单只有一个Input框时,回车键默认为表单提交的事件

所以最后的解决文案为:

<el-form ref="form" :model="form" :rules="rules" label-width="100px" @submit.native.prevent>
  <el-form-item label="新密码:" prop="biz_user_password">
    <el-input v-model="form.biz_user_password" placeholder="请输入新密码" @keyup.enter.native="keyUp('form')"></el-input>
  </el-form-item>
  <!-- <el-form-item label-width="0" style="margin-top: 40px;text-align: center;">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" :loading="loading" @click="keyUp('form')">确 定</el-button>
  </el-form-item> -->
</el-form>

解决文案就是给form加一个@submit.native.prevent就可以阻止表单默认的提交行为

这样就解决了~~

以上…文章来源地址https://www.toymoban.com/news/detail-502221.html

到了这里,关于element ui中的el-input回车键事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 首页搜索框传递参数,并在搜索页面中的搜索框中进行显示,搜索框绑定回车键进行搜索

    1.写出搜索条件和搜索框 2.添加scss样式 页面 3.搜索框选择条件,在搜索框中输入内容,然后进行页面跳转 在搜索框中输入内容,然后进行页面跳转 4.页面跳转后从地址栏中获取相关数据,搜索条件和搜索框中的内容 从地址栏中获取到相关数据searchText和selectSearch的值

    2024年02月10日
    浏览(86)
  • Vue按回车键进行搜索

    需求:为了用户方便进行搜索数据的时候不想点击搜索按钮,想要在input输入框内输入完成之后直接按回车键进行搜索 第一种方法 在input标签内部增加@keyup.enter事件即可,事件名为按钮点击名称 第二种方法  注:@keyup.enter.native=\\\"getsearchdata\\\"//这里要和搜索的事件名称一样    

    2024年02月16日
    浏览(26)
  • html中登录按钮添加回车键登录

    原文链接有3种方法,其它2中不会弄,第二种方法成功,下面详细说说 原html的登录部分是 在该html中增加 需要注意的是 中的button与原html中id属性保持一致。

    2024年02月08日
    浏览(32)
  • Vue 中使用回车键触发事件的方法详解

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 在 Vue 前端开发中,我们经常需要在输入框或表单中使用回车键触发某个特定的事件,例如提交表单或搜索数据等

    2024年02月11日
    浏览(33)
  • element-ui :封装el-input 遇到的问题

    因项目中有多处输入框要求只能输入整数或者浮点数, el-input 设置type=number 火狐浏览器这个属性是无效的; 所以就想到了 使用el-input type=text 输入的时候 正则匹配, 只能输入整数或者浮点数; 所以为了方便使用,需要对第三方库el-input 进行封装。 1. 初始封装的组件Number-in

    2024年02月03日
    浏览(46)
  • Element UI el-input 只能输入大于0的正整数

    当输入值以0开头或者不为0-9的整数时,则用\\\' \\\'替换掉(/g表示全局匹配,则所有匹配项都会被替换掉),效果为不能输入以0开头或不为正整数的值。

    2024年02月14日
    浏览(44)
  • 如何给 el-input 添加键盘回车事件

    查找 Element UI 的 input输入框组件(el-input组件),都没有发现可以给输入框添加的回车键监听事件,因为Element UI对其做了进一步封装,想要直接添加 @keydown(或者@keyup.enter)是无效的。 要想在el-input中实现回车键监听事件,需要在@keyup.enter后面加上.native,即 那么 .native 是如

    2024年02月16日
    浏览(41)
  • element ui el-input输入框type=number去掉上下箭头

    使用vue框架写法 如果是input标签type=number,将上述css代码中 ::v-deep 去掉即可

    2024年02月12日
    浏览(40)
  • Element UI 中 el-input 标签去掉边框的一种办法

    最近在做一个简单的页面,想把 el-input 去掉边框,在网上找了很多方法,最终发现下边这种方法是可行的: HTML代码: 样式代码如下: 注意这里的样式语言用的是 less,其深度穿透写法是 /deep/。 由此便可去除 el-input 的外边框。

    2024年02月16日
    浏览(33)
  • 解决:element ui表格表头自定义输入框单元格el-input不能输入问题

    表格表头如图所示,有 40-45,45-50 数据,且以输入框形式呈现,现想修改其数据或点击右侧加号增加新数据编辑。结果不能输入,部分代码如下 我看在这一块 template 中不需要用到 scope 去获取数据,于是没有加上 slot-scope=\\\"scope\\\" 结果不能输入,解决方法就是在表头自定义时将

    2024年02月03日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包