Element-plus中的el-input无法输入空格和Enter事件无法触发问题

smacricket00

于 2024-08-13 15:17:51 发布

阅读量384

点赞数 3

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_41068362/article/details/141164846

版权

摘要

因为在项目中经常遇到但是又经常忘记是什么原因，记录一下留着自用。

原因：在 el-input 外层包了一层 el-tooltip 导致的。
解决：设置 el-tooltip 的 trigger-keys 属性为空数组，<el-tooltip v-bind="$tooltipConfig" :content="t('sample.tissue')" :trigger-keys="[]">

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

smacricket00

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue3+element-plus 表单输入框无法输入

veceny的博客

03-12

4317

【代码】vue3+element-plus 表单输入框无法输入。

按enter回车使el-input失去焦点

weixin_43033775的博客

09-17

674

【代码】按enter回车使el-input失去焦点。

参与评论您还未登录，请先登录后发表或查看评论

el-input 不允许输入空格

南湖小皮的博客

04-22

560

需求：在使用el-input时不允许使用空格 <el-input v-model.trim="data"></el-input>

Input 输入框禁止输入空格-vue

sun2829191346的博客

07-02

1070

Input 输入框禁止输入空格—vue+element-ui

【踩坑笔记】vue3 element-plus el-input 无法输入问题

soladuor

10-08

7893

原因是 el-form 的 v-model="loginForm" ref="loginForm" 在vue3中值不能相同。把ref去掉或者改名即可。

vue el-input输入框禁止输入空格

热门推荐

qq_39960204的博客

04-25

1万+

vue el-input输入框禁止输入空格 v-model.trim <el-input v-model.trim="input" placeholder="请输入内容"></el-input> 这个方法不仅可以禁用空格，还可以禁用 type=“textarea” 时的回车 @onkeyup <el-input type="textarea" v-model="input" :onkeyup="input= input.replace(/[ ]/g,'')"><

el-input输入的密码不能包含空格的正则表达式

migexiaoliang的博客

03-14

1289

el-input输入的密码不能包含空格的正则表达式。element-ui 密码框显示小眼睛，点击可查看密码。我们在设置密码的时候，不管在首尾还是中间都不允许有空格的，.trim仅仅可以去除首尾空格，当在中间加空格的时候没办法知道，这时候便需要正则来校验提醒用户。

Element-ui-vue3-前端界面开发-配置-编辑main.js-nodejs基础语法-vue3-html模板语法-vue文件编译

插件开发

05-08

1249

在 Vue 3 中，计算属性（Computed Properties）是一种强大的功能，它允许你声明一个依赖于其他响应式数据属性的属性，并且这个属性的值会根据其依赖的数据的变化而自动更新。在Vue3中，setup函数中的this指向的是undefined，因为setup函数是在组件实例化之前执行的，此时还没有this对象。组件中的data是一个函数，他返回一个data对象，里面包含着用户定义的组件的属性变量，当根组件挂载到某个DOM元素上创建好组件实例后，Vue将data以$data的形式存在于组件中。

回车到下一个输入框 vue + element ui实现

Quiet_123的博客

08-25

1983

<template> <divclass="table-container"> <el-formref="formRef":rules="rules":model="formData"label-width="100px"class="from-box"> <divclass="title-info">基础信息</div> <el-row> <el-col>...

Strapi+Vue+MySQL项目实战

dwzsw的博客

08-08

2212

Strapi+Vue+Element+MySql项目实战软件：VSCode 前端：Vue3 接口：Strapi 后端：MySql 简介：创建Strapi和Vue部分网上有很多文章就不再赘述啦，本文主要是运用结合Strapi的api接口对数据库进行增删改查等操作 Strapi的使用可以参考官方文档 1.登录/注册界面 1.1数据准备需要先在Strapi中先创建用户，如下图：而且！！！用户所对应的角色需要对以下操作进行授权：其中callback可以用于获取角色的token，register是用于注册

【VUE】看完这篇文章能够了解es6特性和vue基础

嗨Sirius

12-13

2261

Vue讲解 1.Vue.js特性简介什么是Vue.js Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 Vue.js是一个渐进式框架，什么是渐进式？渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。如果你希望将更多的业务逻辑适用Vue实现，那么Vue有成熟，稳定的核心库和生态系统。 Core+Vue-router+Vuex可以满足你各种各

elementUI中input框无法输入与禁止输入空格

細水、長流√的专栏

03-02

4039

使用原生input标签自带的keyup事件监听方法。3、使用element UI 的表单验证功能。1、使用vue框架中的.trim修饰符。

el-input输入框的空格问题

qq_45055165的博客

08-17

1293

技术栈：vue + elementui 需求：在表单中，输入的内容要去除两端空格 1.允许输入空格 2.输入空格后表单非空验证不通过解决方式1：使用v-model的指令修饰符.trim(缺点：不能输入空格，不满足需求) 解决方法2：使用blur方法在失去焦点时进行trim（） <el-input v-model="formData.moduleId" @blur="formData.moduleId=$event.target.value.trim()" .

Vue3 Element plus的el-input组件无法输入问题

最新发布

SomeBodyL的博客

08-07

269

一个Vue3项目，在写登录界面的时候，使用了Element Plus的el-input组件，发现无法输入，以下是源码。将 :model 改为 v-model 就可以了。

vue3 element plus el-input 无法输入问题

supming1的专栏

11-11

9195

最近用vue3 elementplus进行开发，发现el-input无法输入，代码如下： <template> <el-card> <template #header> <div class="card-header"> <el-form ref="searchForm" :model="searchForm" label-width="80px"> <el-form-it...

vue input 如何限制输入框输入空格

weixin_43858851的博客

05-19

2047

vue input 如何限制输入框输入空格

在Vue项目里使用element ui在input框上使用v-model.trim导致输入空格失效

細水、長流√的专栏

03-02

1290

修饰符，得到的内容是去除了前后空白的，但是在输入数据的时候没法按空格键输入空格，这让录数据的人非常难受。分析不能输入空格的原因就是，element的input框不支持。版权声明：本文为CSDN博主「Yongqiang Chen」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。在vue项目里使用element ui组件库，你会发现使用element的input框，如果在。v-model上加.trim。

. el-input 不允许只输入空格el-table-column长度超过时隐藏显示-tooltip 将后台返回的数字0 1 2 转化为对应的文字信息

Aa12364567的博客

11-21

976

【代码】. el-input 不允许只输入空格el-table-column长度超过时隐藏显示-tooltip 将后台返回的数字0 1 2 转化为对应的文字信息。

el-input 框回车不换行

08-30

el-input 框回车不换行的问题可以通过添加事件 @keydown.enter.native.prevent 解决。在输入框上添加这个事件后，当按下回车键时，不会换行，而是执行其他操作。例如，在给消息添加换行符的方法中，可以使用 e.preventDefault() 来阻止默认的换行行为，从而实现回车不换行的效果。这样，无论是按下 Enter 键还是组合键 Ctrl + Enter 键，都不会触发换行。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [enter键控制input光标移动到下一个框](https://download.csdn.net/download/alice_666/10740494)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [el-input，textarea回车键不换行，发送消息](https://blog.csdn.net/Cool_so_cool/article/details/111050230)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [el-input发送消息空格、换行问题](https://blog.csdn.net/weixin_48414904/article/details/129498846)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]