【修复日常bug】关于移动端安卓系统中app的【input标签】或【textarea标签】偶现不弹起输入框

所使用的技术框架

uni-app框架。

 

问题描述

在安卓系统中，input或者textarea输入框偶现不弹起（输入法弹起，输入框无法自动上推）。

 

问题原因

这就是兼容性的一个问题，因为在苹果系统是不会出现此问题，在仔细对比两端的差别得出了结论，那就是失去焦点的问题导致；

ios系统：输入框失去焦点，光标马上消失。

android系统：输入框失去焦点，光标闪烁一次到两次后消失。

 

输入法收起，输入框失去焦点需要闪烁几下，才会执行blur方法。在输入框还没有失去焦点的情况下再次点击输入框，就会导致输入框无法弹起，此时输入法已经弹起来了。为什么会这样呢，因为点击了输入法有个关闭按钮所以导致输入框没有及时响应；

 

输入法（点击关闭） ---- 通知输入框 ---->    输入框收到响应 （这整个过程需要耗时1000毫秒以上）

 

解决思路

这时我们应该做的就是监听输入法的高度变化，对输入框进行初始化；

给输入框添加isShowTextarea字段进行判断显示或隐藏（当输入法收起的时候隐藏输入框再显示）

<textarea v-if="isShowTextarea" name="msg_title" :cursor-spacing="90" v-model="msg_title" placeholder="说点什么吧～" class="chat-input"/></view>

在进入页面（onLoad）初始化的时候开始监听键盘高度

onLoad(){
    this.watchKeyWord()
},
methods:{
    //监听键盘高度变化
	watchKeyWord(){
		uni.onKeyboardHeightChange(res => {
		  if(res.height == 0){
			this.isShowTextarea = false
			setTimeout(()=>{
				this.isShowTextarea = true
			},20) 
		  }
		})
	}
}

uni.onKeyboardHeightChange用于监听键盘的高度变化。键盘弹出或收都会触发此api，当高度为0的时候说明键盘收起，则隐藏键盘，在定时20毫秒后再次显示键盘，这样子就解决输入框无法弹起的问题啦；