el-input添加默认前置值，不可删除，只能在默认值之后增加

问题描述

输入框输入文本前有默认前置值，只能在默认值之后增加，不能删除默认值。

问题分析

输入框有默认值，可以使用监听 input 方法，判断当前字符串的长度，如果小于等于默认字符串的长度，就等于默认的字符串，否则就自由编辑。

问题解决

通过设置元素的data-* 属性的值，再通过css属性attr(data-*)获取设置的值，然后再使用before再input前面添加一个伪类元素，再设置输入框text-indent的值即可实现

.input-prepend::before {display: block;content: attr(data-content); // 获取data-*的值position: absolute;top: 1px;left: 1px;padding: 4px;}// 如果默认值是固定的只用css就可以了，但是如果默认值长度是变化的就需要通过js计算伪元素的宽度和input的左padding

通过 input 方法监听输入值的变化，再根据默认值的长度判断，当输入框中的值等于默认值的长度时设置输入框的value等于默认值。（推荐）

<el-input v-model="form1.code" @input="handleInput" />

handleInput(val) {let def = '100102'if (val.length <= def.length) {this.form1.code = def}
},

el-input添加默认前置值，不可删除，只能在默认值之后增加相关推荐

HTML批量删除标记,批量删除LabelImg制作的.xml中的部分标签值（删除.xml的节点值）...
概述自己在用labelImg打好标签后,想只用其中几类训练,不想训练全部类别,又不想重新打标生成.xml文件,因此想到这个办法:直接在.xml文件中删除原有的不需要的标签类及其属性. 打标时标签名出 ...
el select 清空_解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除. 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 d ...
HTML5+CSS3 为 input 添加一键删除按钮
HTML5+CSS3 为 input 添加一键删除按钮经常可以看到一些 input 输入框在输入文字后,输入框末尾会出现一键删除的按钮更多精彩更多技术博客,请移步 IT人才终生实训与职业进阶平台 ...
动态数组，数组初始化，数组内存释放，向数组中添加一个元素，向数组中添加多个元素，数组打印，顺序查找，二分查找，查找数组并返回地址，冒泡排序，改变数组中某个元素的值，删除一个数值，删除所有，查找含有
1定义接口: Num.h #ifndef_NUM_H_ #define_NUM_H_ #include<stdio.h> #include<stdlib.h> /**** ...
字典删除多个键值对方法_Life is short，you need Python——Python序列（元组、字典、集合）...
一.元组 tuple 列表属于可变序列,可以任意修改列表中的元素. 元组属于不可变序列,不能修改元组中的元素.因此,元组没有增加元素.修改元素.删除元素相关的方法. 下面只介绍元组的创建和删除,元组中 ...
HTML5 中的 input 元素的输入类型（type 属性的取值）
目录输入类型:text 输入类型:image 输入类型:reset 输入类型:password 输入类型:submit 输入类型:radio 输入类型:checkbox 输入类型:button 输入 ...
java布尔值默认值是_Java中的布尔值和布尔值的默认值
Java中boolean(原始)和boolean(原始包装器)的默认值是什么? Boolean(对象)的默认值为null. Boolean(原始)的默认值为false. 请添加官方源链接任何Obje ...
python取出字典的某个键_python 取出字典的键或者值/如何删除一个字典的键值对/如何遍历字典...
先定义一个字典并直接进行初始化赋值 my_dict = dict(name="lowman", age=45, money=998, hourse=None) 1.取出该字典所有的 ...
用mendeley在word中插入文献_Mendeley在Word添加工具栏和插入和删除文献的方法 | 科研动力...
Mendeley在Word添加工具栏和插入和删除文献的方法.Mendeley如何在Word中插入文献,刚开始使用Mendeley可能有点摸不着头脑.尤其是Mendeley安装完毕,Word中可能并没有 ...

el-input添加默认前置值，不可删除，只能在默认值之后增加

问题描述

问题分析

问题解决

el-input添加默认前置值，不可删除，只能在默认值之后增加相关推荐

最新文章

热门文章