|
这几天uni-app写 haiBing海冰--New Bing精简版 bing.dahai123.top uni-app在miui12.5 android10, textarea组件可以正常上浮,不被键盘遮挡 问题就出在 miui14 android13, 键盘上浮, 遮挡了输入框textarea 我用的是 HBuilder X 3.8.4; VUE3 ; 大海浏览器用的是腾讯X5内核, tbssdk:44275 网上搜了很多方案 加上 class="uni-textarea" cursor-spacing="10" ; 因为textarea上下宽, 目前看不起作用 2. 说下我的解决方法; 如果是android手机, 获得焦点时(@focus), 延时350ms, 检查键盘是否升起; 如果没起来,把textarea区域(tail)底部加高,(this.tail.classList.add('tail_up'), 高度就是键盘高度 h5目前没找到获得键盘高度的好办法, 就用 39vh代替(屏幕的39%) 失去焦点时( @blur), 把高度删掉,remove('tail_up')
{{ fontNum }}/4000
export default {
data() {
return {
tail: undefined,
keyboardHeight: 0,
screenHeight: window.innerHeight,
systemInfo: uni.getSystemInfoSync(),
};
},
methods: {
riseTextarea() {
// console.log('riseTextarea');
// console.log(this.systemInfo)
this.tail = document.getElementById("tail")
this.keyboardHeight = this.screenHeight - window.innerHeight;
if (!this.keyboardHeight && this.systemInfo.osName == 'android') {
/*mi8 miui12.5 android10 ,uniapp的textarea可上浮不被键盘遮挡;
但redmi11 miui14 android13, uniapp的textarea不能上浮,被键盘遮挡;
350ms延时等待键盘升起
*/
// this.timerId = window.setInterval(this.updateKeyboardHeight, 300);
window.setTimeout(this.updateKeyboardHeight, 350);
// this.fontNum = 'os:' + this.systemInfo.osVersion + ',keyboardHeight:' + this.keyboardHeight + ';'
}
},
downTextarea() {
// console.log('downTextarea');
this.tail.classList.remove('tail_up')
},
updateKeyboardHeight() {
this.keyboardHeight = this.screenHeight - window.innerHeight;
// this.fontNum = '2os:' + this.systemInfo.osVersion + ',keyboardHeight:' + this.keyboardHeight + ';'
if (!this.keyboardHeight && !this.tail.classList.contains('tail_up')) {
this.keyboardHeight = this.screenHeight - window.innerHeight;
this.tail.classList.add('tail_up');
}
},
}
/*
这是键盘高度
*/
.tail_up {
margin-bottom: 39vh;
}
#tail {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 7rem;
display: flex;
justify-content: center;
backdrop-filter: blur(10px);
background-color: #ffffff78;
flex-direction: column-reverse;
align-items: center;
z-index: 99;
}
#tail-in {
display: flex;
width: 95%;
max-width: 75rem;
align-items: center;
justify-content: center;
height: 80%;
}
|