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

于 2024-08-13 15:17:51 发布
阅读量907 收藏 1
点赞数 6
文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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="[]">

在这里插入图片描述

smacricket00
关注
vue3+element-plus 表单输入框无法输入
veceny的博客
03-12 4637
【代码】vue3+element-plus 表单输入框无法输入。
Element-ui-vue3-前端界面开发-配置-编辑main.js-nodejs基础语法-vue3-html模板语法-vue文件编译
插件开发
05-08 1666
在 Vue 3 中，计算属性（Computed Properties）是一种强大的功能，它允许你声明一个依赖于其他响应式数据属性的属性，并且这个属性的值会根据其依赖的数据的变化而自动更新。在Vue3中，setup函数中的this指向的是undefined，因为setup函数是在组件实例化之前执行的，此时还没有this对象。组件中的data是一个函数，他返回一个data对象，里面包含着用户定义的组件的属性变量，当根组件挂载到某个DOM元素上创建好组件实例后，Vue将data以$data的形式存在于组件中。
vue中el-input绑定键盘按键(按键修饰符)
11-20
vue怎么写键盘事件 vue允许将按键值作为修饰符来使用，如监听回车事件，有两种写法，如下代码： <input type="text" @keyup.13="console.log($event)"></input> <input type="text" @keyup.enter="console.log($event)"></input> 但要注意的是：当我们在在el-input采用如上两种写法时，他是不生效的。el-input监听不到键盘事件,原因是element-ui是封装组件，所以el标签属于自定义标签，因此触发不了键盘事件。 解决办法：加上.native原生事件修饰符即可。
el-input 不允许输入空格
南湖小皮的博客
04-22 666
需求： 在使用el-input时不允许使用空格 <el-input v-model.trim="data"></el-input>
Input 输入框禁止输入空格-vue
sun2829191346的博客
07-02 2033
Input 输入框禁止输入空格—vue+element-ui
【踩坑笔记】vue3 element-plus el-input 无法输入问题
soladuor
10-08 8965
原因是 el-form 的 v-model="loginForm" ref="loginForm" 在vue3中值不能相同。把ref去掉或者改名即可。
el-dropdown下的input无法输入空格
m0_68515419的博客
12-29 890
最近的业务里有个需求，就是要实现自动填充，这个在elment-plus也有对应的组件，但是自己希望自定义input的样式，所以采用了input+el-dropdown的做法来实现自动填充效果。不过现在又有了另一个问题，那就是输入空格之后，input就会失去focus，推测是因为dropdown接收到空格之后自动Blur，最后非常曲折的实现了输入空格以及控制下拉框出现的时机。在网上找了很多文章，不过大多是教怎么禁止在input中输入空格（可能我找的关键词有问题），后来找到。
Strapi+Vue+MySQL项目实战
dwzsw的博客
08-08 2441
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 2403
Vue讲解 1.Vue.js特性简介 什么是Vue.js Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 Vue.js是一个渐进式框架，什么是渐进式？ 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。 如果你希望将更多的业务逻辑适用Vue实现，那么Vue有成熟，稳定的核心库和生态系统。 Core+Vue-router+Vuex可以满足你各种各
社招前端vue面试题汇总
bb_xiaxia1998的博客
12-07 1035
1. pinia是什么？2. 为什么要使用pinia？3. pinna使用pinna文档(opens new window)我们这里搭建一个最新的项目 基础使用 2.1 创建 创建很简单，调用p中的函数即可，该函数接收两个参数：我们可以定义任意数量的，因为我们其实一个就是一个函数，这也是的好处之一，让我们的代码扁平化了，这和的实现思想是一样的2.2 使用 2.3 添加 2.4 读取数据 上段代码中我们直接通过等方式获取到了存储的值，但是大家有没有发现，这样比较繁琐，我们其实可以用解构的方式来获取值，
vue框架使用
qq_45645848的博客
01-11 1413
前端vue基础知识总结，汇总
elementUI中input框无法输入与禁止输入空格
細水、長流√的专栏
03-02 4485
使用原生input标签自带的keyup事件监听方法。3、使用element UI 的表单验证功能。1、使用vue框架中的.trim修饰符。
Vue3 Element plus的el-input组件无法输入问题
SomeBodyL的博客
08-07 609
一个Vue3项目，在写登录界面的时候，使用了Element Plus的el-input组件，发现无法输入，以下是源码。将 :model 改为 v-model 就可以了。
el-input输入校验不能为空格，不能输入全部为空的内容
鹤渺的星球
01-06 7836
输入框的校验太常见了，基本上常见的为：不能为空，不能输入空格，和不能输入全部为空的内容。这里对这个进行记录。
element input 无法输入空格
qq_17627195的博客
07-08 1100
原因：绑定数据的时候是用 v-model.trim 绑定的数据 <el-input v-model.trim="test"></el-input> 解决方法：删除 .trim 直接用 v-model 就可以了 <el-input v-model="test"></el-input>
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 1424
el-input输入的密码不能包含空格的正则表达式。element-ui 密码框显示小眼睛，点击可查看密码。我们在设置密码的时候，不管在首尾还是中间都不允许有空格的，.trim仅仅可以去除首尾空格，当在中间加空格的时候没办法知道，这时候便需要正则来校验提醒用户。
. el-input 不允许只输入空格el-table-column长度超过时隐藏显示-tooltip 将后台返回的数字0 1 2 转化为对应的文字信息
Aa12364567的博客
11-21 1030
【代码】. el-input 不允许只输入空格el-table-column长度超过时隐藏显示-tooltip 将后台返回的数字0 1 2 转化为对应的文字信息。
【el-input输入框无法输入问题】
越来越优秀的程序员的博客
01-06 693
其实很简单，就是element-plus里面的组件的数据绑定，只能写v-model，不能用：model，自己可以去试试。
Vue3 element-plus中el-descriptions包裹着el-input，对el-descriptions样式穿透无效
最新发布
01-06
### 解决 Vue3 和 Element Plus 中 `el-descriptions` 组件包裹 `el-input` 时样式穿透的问题 当使用 `el-descriptions` 包含 `el-input` 并尝试应用自定义样式时，可能会遇到样式无法生效的情况。这是因为 Element Plus 的组件默认会作用于 Shadow DOM 或者有更具体的 CSS 特异性设置。 #### 使用深类选择器（Deep Selector） 为了使外部样式能够影响到嵌套的子组件，可以采用 `/deep/` 或 `::v-deep` 深层级选择器来实现样式穿透： ```css <style scoped> /* 对于较新的版本 */ .el-descriptions /deep/ .el-input { width: 100%; } /* 另一种方式适用于某些特定场景 */ .el-descriptions ::v-deep(.el-input) { width: 100%; } </style> ``` 需要注意的是，在最新的 Vue 单文件组件 (SFC) 规范中推荐使用 `>>>` 替代 `/deep/` 来达到相同效果；然而对于 `<style scoped>` 块内的样式表来说，上述两种写法均能正常工作[^1]。 #### 利用全局样式覆盖 如果希望更加彻底地控制内部输入框的表现形式而不局限于单个页面，则可以在项目根目录下的公共样式文件里直接指定规则： ```css /* 放置在 main.css 或类似的全局样式文件中 */ .el-descriptions-item__content .el-input { /* 自定义属性 */ width: 100% !important; } ``` 这种方法虽然简单粗暴但是效率较低，并且可能会影响到其他地方同样结构的内容，因此建议谨慎使用并尽可能通过局部解决方案解决问题[^2]。 #### 修改组件库主题变量 Element Plus 提供了一种更为优雅的方法——即调整其内置的主题配置项。可以通过修改 LESS/SASS 文件中的相应参数来自定义外观而无需额外编写过多CSS代码。具体操作可参照官方文档关于定制化的部分说明[^3]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值