禁止小程序输入Emoji表情符_小程序禁止输入表情包-CSDN博客

本文链接：https://blog.csdn.net/FurtherSkyQ/article/details/106362661

前言:

在小程序中<textarea>刚开始是可以输入表情符号，但是后来因为输入表情会导致一个下拉bug，所以微信就默不作声的将这个共功能给关闭了。

但是我们在开发小程序的时候，有时会涉及到输入操作，小程序可以输入表情（这里主要指的是IOS的Emoji表情），前台可以输入表情，但是后台就不干了，因为文字和Emoji表情在数据库中的字节不一样，这就涉及到数据库了，Mysql举例，不设置数据库的话会报这个错

Incorrect string value: '\xF0\x9F...' for column 'XXX' at row 1

原因是：”这个问题，原因是UTF-8编码有可能是两个、三个、四个字节。Emoji表情或者某些特殊字符是4个字节，而Mysql的utf8编码最多3个字节，所以数据插不进去。

这时你又要跑去设置数据库：一句话累不累

在无特殊需求的时候，我们不让用户输入表情，以下是实现方法。

一】给小程序绑定 bindinput事件

bindinput事件：组件绑定bindinput事件，作用：在用户输入的时候去执行这个事件。

  <textarea placeholder="点击添加文字," placeholder-class="texts" placeholder-style="color:#ccc;"  bindinput="changeContext" data-index="{{index}}" value="{{item.imgText}}" >
          
   </textarea>

然后再小程序的JS文件中做处理

 changeContext: function(e) {
     // e.detail.value   获取输入框的值
    var str = e.detail.value.replace(/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig, "");     // 表情的正则表达式 
    console.log("替换后的值"+e.detail.value)
    var imgList = this.data.imgList;
    var {
      index
    } = e.target.dataset
    imgList[index].imgText = str
    imgList[index].imgword = str.length+0
    this.setData({
      imgList     // 最后再把替换的值设置回去   
    })


  },

imgList是小程序设置的全局变量，为了就是实时替换输入框内的值主要的代码就是

replace(/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig, ""); // 表情的正则表达式

replace里的就是 Emoji表情的范围