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
}
},
更多推荐
所有评论(0)