ios与mac系统，input输入时，自带的输入法会出现重复显示问题

问题：ios与mac系统，input输入时，自带的输入法会出现重复显示问题
解决方法：以不允许输入表情为例
需要为安卓及ios进行兼容处理
先区分系统再调用对应方法
ios：

// ios不让输入表情 并且兼容 自带输入法
oninputplnrios = e => {
  console.log('ios输入法限制')
  let input = document.getElementById('textarea')
  input.addEventListener('compositionstart', e => {
    this.inputLock = true
    console.log('compositionstart', checkLength(e.target.value), e)
  })
  input.addEventListener('compositionend', e => {
    this.inputLock = false
    console.log('compositionend', checkLength(e.target.value), e)
  })
  function checkLength(data) {
    console.log(data)
    input.value = data.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\`\~\!\@\#\$\%\^\&\*\(\)\_\+\=\<\>\?\:\"\{\}\|\,\.\\\/\;\'\[\]\·\~\！\@\#\￥\%\……\&\*\（\）\+\=\{\}\|\《\》\？\：\“\”\【\】\、\；\‘\’\，\。\、\￥\-]/g, '')
  }
}

安卓：
// 安卓不让输入表情
oninputplnr1 =e => {
  console.log('安卓输入法限制')
  if ((/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\`\~\!\@\#\$\%\^\&\*\(\)\_\+\=\<\>\?\:\"\{\}\|\,\.\\\/\;\'\[\]\·\~\！\@\#\￥\%\……\&\*\（\）\+\=\{\}\|\《\》\？\：\“\”\【\】\、\；\‘\’\，\。\、\￥\-]/g).test(e.target.value)) {
    console.log('阻断')
    e.target.value = e.target.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\`\~\!\@\#\$\%\^\&\*\(\)\_\+\=\<\>\?\:\"\{\}\|\,\.\\\/\;\'\[\]\·\~\！\@\#\￥\%\……\&\*\（\）\+\=\{\}\|\《\》\？\：\“\”\【\】\、\；\‘\’\，\。\、\￥\-]/g, '')
    console.log('进入判断后的e', e.target.value)
  } else {
    console.log('通过')
  }
}