el-input文本域字数限制，超过显示变红并禁止输入

Posted 2023-02-05 1024_Byte

效果展示

代码：

  <el-form-item label="养护要点说明：" prop="remark" :rules="[ required: true, message: '不能为空' ]">
            <el-input
              type="textarea"
              @input="timeEffectInput"  // 输入事件（在这处理限制）
              maxlength="200"  // 最大字数限制
              resize="none"    // 控制是否能被用户缩放
              show-word-limit  // 是否显示输入字数统计
              :rows="3"        // 自适应内容高度，可传入对象，如， minRows: 2, maxRows: 6 
              style="width: 92%"
              v-model="dialogForm.remark"
              placeholder="请输入养护要点说明！"
            ></el-input>
          </el-form-item>

timeEffectInput() 
      const length = this.dialogForm.remark.length  // 先拿到当前输入时文本域文字长度
      if (length >= 200)   // 当长度超过200
      	// 获取文本域计数统计设置字体为红色
        this.$el.querySelector('.el-input__count').style = 'color:red !important' 
       	// 防止后续输入溢出截取0-200的字符
        this.dialogForm.remark = this.dialogForm.remark.substr(0, 200)
       else 
        // 不超过则设置为原字体颜色
        this.$el.querySelector('.el-input__count').style = 'color:#909399 !important'
      
    ,