input框末尾增加默认字段，不可删除，不可在默认字段后添加内容。

最新推荐文章于 2024-07-12 11:23:00 发布

隐于世丶

最新推荐文章于 2024-07-12 11:23:00 发布

阅读量449

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52053311/article/details/132423397

版权

文章讲述了在一个文本输入框中，如何保护默认字段不被误删，以及在输入法下对文本内容的操作限制，通过事件如`onDeleteKeyDown`、`onKeyDown`和`compositionend`进行精确控制。

摘要由CSDN通过智能技术生成

<el-input type="textarea" v-model="msgContent" placeholder="请输入" @keydown.delete.native="onDeleteKeyDown"
      @keydown.native="onKeyDown" @compositionstart.native="onCompositionStart"
      @compositionend.native="compositionend"></el-input>

data() {
    return {
      msgContent: ",退订回TD",
      checkText: "",
    };
  },

onDeleteKeyDown:当删除内容时判断删除的是否是默认字段，是的话就禁止删除。

onDeleteKeyDown(e) {
      let { selectionStart, selectionEnd } = e.target;
      let start = e.target.textLength;
      let end = e.target.textLength - 5;
      // 如果包含不能删除的区域位置，阻止删除
      if (!(selectionStart > start || selectionEnd < end)) {
        e.preventDefault()
      }
    },

onKeyDown：如果在默认字段中间或者后边操作，则输入失败

onKeyDown(e) {
      // 如果包含不能删除的区域，禁止
      if (e.target.selectionStart > e.target.textLength - 6) {
        e.preventDefault()
      }
    },

onCompositionStart：输入法中文状态下记录输入前文字的内容

onCompositionStart(e) {
      this.checkText = e.target.value; //记录选中的文字
    },

compositionend：输入法中文状态下判断是否对默认字段进行操作

compositionend(e) {
      this.$nextTick(() => {
        if (e.target.selectionStart > e.target.textLength - 6) {
          //如果是在默认字段中间或后边添加或删除操作，则把操作前的内容再次赋值
          //保证内容一直是默认字段在文本的最后边。
          e.target.value = this.checkText;
          this.msgContent = e.target.value;
        }
      })
    },