关于输入框或文本框添加默认前置值不可删除且可继续输入

image.png

原理：

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

html->input

css 部分(重要)

.textarea-prepend::before {
    background-color: #f5f7fa;
    color: #909399;
    display: block;
    position: absolute;
    content: attr(data-content);    /* 极为重要，可获取元素上携带的data-* 属性的值*/
    top: 1px;
    left: 1px;
    border-radius: 4px;
    padding: 4px;
    white-space: nowrap;
    line-height: normal;
  }

js部分：

//因为此项目的需求导致输入框的前置文本是不同的，前置文本的字数长度也是不同的所以使用js来动态设置data-content属性的值和input输入框css属性text-indent的值
mounted() {
    const el = document.querySelector('.textarea-prepend')
    el.setAttribute('data-content', this.tenantMessageInfo.smsSign)
    const textArea = document.querySelector('.textarea-prepend .el-textarea__inner')
    textArea.style.textIndent = this.tenantMessageInfo.smsSign.length * 14 + 'px'
    this.totalContent = this.tenantMessageInfo.smsSign + this.messageDetail.content
  },

如果你的前置值是固定的就不需要js了
只需在input框上面加入data-*的属性就可以了