textarea 右下角动态监测已经输入多少个字(受表情影响)

在vue项目中遇到还能输入多少个字的需求, 当时使用了 maxlength = 60 ,以及 @input事件去监听已经输入的.value.length长度,

它在处理输入的文字字数没问题,但是遇到手机上输入表情, 就会出现错误, 

因为一个表情 算两个length长度, 但在maxlength 中只算一个字数, 所以 显示的已经输入的字数会比 限定的字数大.

所以 最后 使用js来控制,

    // 限制输入字数
    wordlimit () {
      let textVal = this.$refs.description.value;
      let lengthMax = 60;
      let length;
      length = parseInt(lengthMax) - parseInt(textVal.length);
      if (length < 0) {
        length = 0
      }
      this.limit = length;
      if (textVal.length >= lengthMax) {
        this.$refs.description.value = textVal.substring(0, lengthMax)
      }
    },

采用的是 @input事件,超过字数限制,还是可以继续输入,所以换成@keyup事件, 浏览器测试ok,但是在ios上不可行, 是因为ios的键盘监听不到 keyup 事件, 最后使用了 @input 和 @keyup 事件一起, 有时候会出现bug, 项目急着交付,这个问题待解决