el-input

Element plus中el-input 框回车触发页面刷新问题及解决方案

elementUi中input组件回车触发页面刷新问题及解决方案技术：vue3+elementplus的UI框架今天做了一个小小的功能，就是基于elementUi框架的一个输入框，需要监听输入框的回车事件，然后调取接口。代码如下：确定在输入框回车后会刷新页面，查询的原因如下解决方案：在el-form里加上@submit.prevent，input输入框里可以使用@keyup.enter监听回车事件
鱼干～·2024-01-15 10:44

el-input 设置最大输入数量
半兽先生·2024-01-13 10:38

VUE3+element plus在el-input上增加图标

目录实现效果关键点实现效果关键点和VUE2+elementUI有差别VUE2+elemenUI使用prefix-icon="el-icon-search"在VUE3+elementplus要使用:prefix-icon="Search"，其中Search图标要单独引入import{Search}from"@element-plus/icons-vue";
尘烟生活家·2024-01-13 08:41

Web前端篇——el-input失去焦点事件监听

有时简单的直接给el-input设置:blur="searchBlur"属性绑定失去焦点事件，会发现失去焦点事件并未触发，除非人为调用了el-input的blur函数才会触发，此时我们可以通过手动添加失去焦点事件的监听
易Yi·2024-01-12 20:30

element input组件自动失去焦点问题解决

最近在Vue3+ElementPlus中，使用el-input组件时，如果设置了v-model，那么在每次改变内容后后，input会自动失去焦点，这样会导致用户无法输入多个字符。
天問_·2024-01-11 10:25

带icon的输入框el-input如何给icon图标绑定点击事件

elementUI官网链接：input输入框带icon的输入框有两种方式：选择第二种slot方式即可绑定点击事件methods:{search(){console.log('搜索');},}
杜蜜月·2024-01-11 09:57

el-input框有时候无法输入的问题

由于在大多数情况下，我们input绑定的都是对象下的某个属性导致视图不能及时更新所以就出现了有时候输入框无法输入的问题解决方法如下change(e){this.$forceUpdate()}
你的bug由我造·2024-01-07 18:32

vue element el-input限制只能输入数字，且保留小数后两位

exportdefault{data(){return{form:{mkPrice:"",slPrice:"",},};},methods:{/***@param{string}value-输入的值*@param{string}name-匹配的对象属性[mkPrice|slPrice]*/limitInput(value,name){this.form[name]=(""+value)//第一步：
佚名猫·2024-01-06 20:41

el-input输入框占位文本placeholder换行显示

代码如下：方法一：使用HTML转义字符，将换行修改为“ ”方法二：使用js模板字符串，“\n”替换换行效果：
憨涛子·2024-01-06 08:21

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

vueel-input输入框禁止输入空格v-model.trim这个方法不仅可以禁用空格，还可以禁用type=“textarea”时的回车@onkeyup这个方法就比较灵活，通过按键松开时匹配正则表达式来去掉输入的空格；理论上也可以用来禁用其他字符，正则没写错应该都可以实现下面博客中还有@keydown.native方法；本人没有测试，如果上面两种方法都不满足，可以看下参考博客https://ww
白龙菜牛·2024-01-04 17:25

element el-input 去掉边框

element样式还是蛮好的，只是有时候我们需要做一些调整，比如，el-input的边框，官网是这样子的我们需要这样子的然后我们常规操作，border:none;或者border:0;发现行不通，哈哈哈哈哈
Hero_rong·2024-01-04 14:13

js通过getElementsByClassName获取到的数组无法直接forEach遍历的解决办法以及禁止用户往输入框el-input里拖拽东西的解决办法

最近项目遇到一个问题，就是登录页面里，用户可以拖拽img的值到输入框里。如下图：为了禁止用户往输入框里拖拽东西，我们先给三个输入框一个相同的类名myInput然后在mounted生命周期里，先通过getElementsByClassName获取三个dom,如下代码里usernameArr打印出来usernameArr不是个正常的数组，而是HTMLCollection这个类数组对象，通过Array.
百思不得小李·2024-01-04 12:19

Element - ui :el-input 输入只能是数字并且小数点后只能是1-2位

要实现只能输入数字且小数点后只能是1-2位的功能，可以使用ElementUI的el-input组件，并结合正则表达式和自定义校验函数来限制输入。
破浪前进·2023-12-30 10:04

vue+element-ui 登录界面 浏览器自动填充保存的用户名和密码问题 后台管理系统 如何取消浏览器自动填充

网上一搜如何取消密码自动填充这个问题大多都是给el-input加auto-complete这个属性但这个属性某些情况下还是会出现自动填充问题会很麻烦不能解决问题这个时候可以使用input密文显示将原本type
Gabriel.c·2023-12-28 17:45

element-ui中el-input去除浏览器账号与密码自动填充

data(){return{readonly:true}},handlerIptClick(){this.readonly=false;},element-ui中el-input使用若同时出现type=
探索未知zxx·2023-12-28 17:42

探究element-ui 2.15.8中＜el-input＞的keydown事件无效问题

一、问题描述今天看到一个问题，在用Vue2+element-ui2.15.8开发时，使用input组件绑定keydown事件没有任何效果。exportdefault{data(){return{content:''}},methods:{handelKeydown(){console.log('触发了Keydown事件！！！')//实际不会触发}}}二、问题排查我们直接调试代码，找到Vue2中事件
晓风伴月·2023-12-28 17:41

element-ui input 输入框记住密码后蓝色背景

.el-input{input{background-color:transparent;&:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill
被抛弃的信念·2023-12-28 17:11

element-ui input autocomplete 输入框记住密码后填充蓝色背景

.el-input{input{background-color:transparent;&:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill
套娃警告·2023-12-28 17:37

element-ui 去掉谷歌浏览器el-input组件或input自动填充账号密码

element-ui去掉谷歌浏览器el-input组件自动填充账号密码效果图一、主要代码之el-input二、主要代码之input1.使用element中el-input自带的属性auto-complete
程序媛_MISS_zhang_0110·2023-12-28 17:06

el-input类型为number时限制输入最大长度

在elementui里el-input类型为number时，并不能使用maxlength或者max限制长度，限制长度为7limitPhoneNum(value){if(value.toString().
Grocery store owner·2023-12-28 10:40

vue修改element-ui中el-input的样式

如想设置圆角,代码如下::v-deep.el-input__inner{border-radius:23px;height:45px;}
男人宫·2023-12-27 17:27

elementui 里使用input 密码框,输入时禁止弹出浏览器历史密码提示框

在elementui中使用el-input的type=password,实现密码输入框的展示隐藏时候,禁用浏览器历史官方api上,使用autocomplete属性不生效解决方案,使用css的-webkit-text-security
图拉呀·2023-12-26 08:43

el-input 点击空白处下拉框消失，点击input显示下拉框

1.因为el-input没有点击input以外的事件2.所以应该用自定义指令来实现，下拉是否显示还是隐藏3.判断是否点击的是input，如果点击input以外的地方都隐藏，点击input显示简单想应该怎么实现
流泪手心_521·2023-12-25 13:00

vue3 element-plus 输入框 clearable属性 聚焦时宽度会变化

解决办法因为你的代码中el-input是没有宽度的，所以实际渲染出来的el-input宽度=原生input宽度+前缀图标宽度+后缀图标宽度。可以写css固定el-input宽度来处理。
余道各努力，千里自同风·2023-12-23 13:16

elementUi中的el-input有时候无法输入

在项目中遇到了el-input偶现无法输入的问题问题出现原因：网上说是因标签嵌套太深，导致视图无法更新，所在输入的时候要手动强制更新一下视图解决方案：
亦久亦旧_898a·2023-12-23 07:27

Vue 中使用 el-input 自动获取焦点和二次获取焦点问题

然后使用了Vue提供的自定义指令来解决，还有一点儿需要注意，el-input
钢铁熊猫33·2023-12-23 02:09

vue2 el-input里实现打字机 效果

vue2el-input里实现打字机效果scriptdataisTypingOtherDesc:false,ifshowOtherDesc:true,typingTextsOtherDesc:[],methoddoDelayOtherDesc(){letthat=this;setTimeout(()=>{this.ruleForm.otherDesc=this.typingTextsOtherDe
绝尘小浪·2023-12-22 12:40

前端-如何自己做一个可视化的人员选择泛用组件

下方列表实时变动（筛选出包含搜索字符的可选项），如果没有字符，就展示所有的选项2.用户点击可选项，右侧出现标签3.用户点击标签的XX，标签会消失，并且左侧改可选项的“选中”状态消失三、具体实现代码主要有三部分组成el-input
大嘴史努比·2023-12-22 11:02

修改el-input 输入框颜色以及placeholder颜色

placeholder提示文字颜色.tessssss/deep/input::-webkit-input-placeholder{-webkit-text-fill-color:red;}//修改输入框字体颜色.el-input
SHOW科技·2023-12-22 10:11

表单自定义校验规则失效

这个表单自定义校验规则，我遇到的问题是当我没有选择位置的时候会报请输入位置，但是当我选择了位置之后，还是依然再报错（请输入具体位置）但是呢，打卡直径却不会，为什么呢因为他是表单el-input绑定了v-model
Ambition-do it·2023-12-21 20:49

vue 中表单自定义校验规则

1.给表单元素绑定:rules和:model2.定义简单校验规则在data里面定义rules属性3,给每一个需要验证的表单项绑定简单校验规则prop(prop千万不要写在el-input中)4.由于简单的校验规则不满足实际需求
aichixiangcaia·2023-12-21 20:14

element-plus el-input 修改边框 border

前提：Vue3+element-plus;1、去除el-input的边框：.inputDeep{:deep(.el-input__wrapper){box-shadow:0000pxvar(--el-input-border-color
龙丨行·2023-12-21 11:20

ElementUI，修改el-select下拉框的样式

在使用到el-select组件中设置:popper-append-to-body=“false”修改样式//修改的是el-input的样式//一种方法是设置最里层el-input__inner的背景色外层的两级父元素设置为透明色
゛anqiaoyun·2023-12-19 06:28

Element组件使用--自定义样式

2.但el-input无法通过custom-input直接对其块长度进行修改。如果使用c
夜间飛行·2023-12-19 00:51

输入框内容部分不可修改el-input部分动态内容不可修改完整代码 省市区联动，详细地址中省市区选择后不可更改

地区：{{data.nationProviceCityName}}{{data.regProvinceAndCityAndCountyName}}{{data.proviceName}}{{data.cityName}}{{data.countyName}}详细地址：{{data.compAddress}}watch:{//国家'data.nationCode':{handler:function
前端记事本·2023-12-17 08:52

Vue el-input限制输入的字符（多种情况 进来看吧）

通过@input只能输入英文大小写和数字及最大长度maxlength只能输入汉字和字母只支持输入数字只支持输入正整数实现校验并且为非必填项dataRules:{//负责人联系电话非必填leaderPhone:[{required:false,trigger:"blur",validator:(r,v,b)=>{v&&!/^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$
春风姐姐·2023-12-16 18:18

js输入框部分内容不可编辑，其余正常输入，el-input和el-select输入框和多个下拉框联动后的内容不可修改

//格式//required自定义指令地区：//v-if="!read&&this.data.nationCode==148"显示逻辑//change事件单独使用不生效需要watch监听一下{{data.nationProviceCityName}}{{data.regProvinceAndCityAndCountyName}}{{data.proviceName}}{{data.cityName
前端记事本·2023-12-16 16:53

随笔记录：关于el-input的多行文本框textarea固定多行不可拖拽

关于这个el-input的textarea属性下的多行文本框，我真是用一次讨厌一次，我也不知道为什么每次那个autosize的属性用着没效果，rows也是没有用，怎么都是一行，真是烦的我（后面有时间我得去看看是为什么了
wu_yans·2023-12-16 04:35

解决el-input输入框(text)与文本域(textarea)字体不一样问题

问题：组件库默认的textarea字体类型在一些比较旧的win7系统容易出现不适配的问题，如下图很明显字体显示出现了问题出现原因：可能是分辨率太低，也可能是该电脑对该字体适配有问题解决办法：与上面的输入库字体保持一致一般情况，我们一个网站的textarea字体都是一样的，所以可以在app.vue中直接修改字体样式，以下代码是我对全局样式的一些统一@import"assets/less/index.
多看书少吃饭·2023-12-16 04:34

el-input textarea输入框 字体英文输入问题、回车提交、ctrl+enter换行等问题

需求一：textarea输入框回车改发送（中文下字母输入时，回车直接发送）关键点：两个方法@keydown.enter.native@input；以及延时获取内容时机inputWay(val){this.question=val},//回车不换行变成发送消息carriageReturn(){lete=window.event||arguments[0];//英文下｜中文下：13EnterEnter
小雍雍·2023-12-16 04:04

将el-input框设置为 textarea （ElementUI）

1、示例2代码其中：就是在el-input中添加了一些属性：①：type="textarea"//将input变为文本框②：rows="4"//设置行高③：placeholder="描述"//提示文本
小只笨笨狗～·2023-12-16 04:00

el-input 输入框相关校验及使用

使用type类型为text时，限制输入的长度使用type类型为text，即文本时，直接使用maxlength属性即可限制文本框输入的长度。*高度px使用type类型为number时，限制输入的长度使用type类型为number，即数字时，直接使用maxlength属性，默认是无法生效的。可在输入的时候进行限制，如下所示。*宽度6)value=value.slice(0,6)">px输入框插入单位*
发呆的薇薇°·2023-12-16 04:29

vue el-input textarea如何按行显示和几种效果

参考：Vuetextarea动态显示行数_Aibac的博客-CSDN博客_textarea显示行数el-inputtextarea换行显示关于这个输入框的内容，我收到后端的textarea1为数组[a,b,c],发现放在这个框里没有按照换行显示，而我们想要的效果：prop["num"]data{retrun{texterear1：“”，}}wait：{//因为这个是父组件传过来的，我就在这里处理，
大少爷π·2023-12-16 04:29

使用el-input输入时，输入框中不显示文字

在使用el-input时，生成的text、textarea文本框中不显示输入的文字，啊啊啊，都要把键盘给敲烂了。。。
Matcha_ice_cream·2023-12-16 04:28

input、el-input输入框输入规则

附：只能输入中文:附：只能输入英文:二、el-inputdata(){return{count:0}}el-input输入金额，保留两位小数需求：“只允许输入金额保留两位小数”，有2种实现方法方法一（通过正则控制
余道各努力，千里自同风·2023-12-16 04:57

elementUI 输入框按回车刷新页面分析与解决

于是我决定对这个前端问题进行分析与解决；分析：首先看一下我的前端代码，很简单只有一个el-input输入框。
齐天qaq·2023-12-15 18:12

限制el-form中的el-input只能输入整数或者小数

在el-form-item动态添加校验规则X定义校验函数,利用正则匹配functiongetCoordinateRules(coord){return[{required:true,message:`${coord}坐标不能为空且必须是数字`,trigger:'blur'},{pattern:/^(\d+|\d*\.\d{1,10})$/,message:`${coord}为整数或最多三位小数,t
会飞的鱼—·2023-12-15 17:41

el-input 标签中密码的显示和隐藏

https://www.cnblogs.com/wanghj-15/p/11213006.html其实element-ui自带这个属性图标可以自己替换
夏目三三st·2023-12-15 17:50

动态增减 el-form 中的 el-input 输入框(带验证)

一.看效果图用户点击按钮可以进行添加一行二.具体实现添加获取添加的部分要用一个div包裹而且在每个el-form-item中写上自己的校验exportdefault{data(){return{xqcunModel:{dynamicItem:[]},rules:[]}},methods:{addItem(){this.xqcunModel.dynamicItem.push({name:'',pho
尚梦·2023-12-15 08:08

input、el-input输入框只能输入正整数（包含或不包含0)

一、input只能输入框只能输入正整数，输入同时禁止了以0开始的数字输入，防止被转化为其他进制的数值。附：只能输入中文:附：只能输入英文:二、el-inputdata(){return{count:0}}
前端小芬芬·2023-12-05 18:22
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他