问题描述

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

问题分析

输入框有默认值,可以使用监听 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
      }
},
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐