问题: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('通过')
}
}