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('通过')
  }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值