首先 textarea 这个标签主要是依靠adjust-position这个属性实现两种不同的弹出键盘跟随的方式

1.false,不往上推页面,通过监听触焦事件(focus)去获取键盘高度(e.detail.height),

然后在你的输入框框上面设置本就fixed元素的bottom属性。

uniapp iOS 键盘高度调整 uniapp强制弹出键盘_前端

 但这里有一个难点,就是获取到的键盘高度不准确 ,我们的输入框会离键盘有一段距离, 附上我找到的解决方案uniapp弹出软键盘获取键盘高度不准确,显示输入框

里面的思想是,因为手机屏幕底部存在虚拟键位,虚拟键位是占了软键盘高度,占了屏幕高度,但是不占屏幕可使用窗口高度的。

这边是他附上的解决方案

uniapp iOS 键盘高度调整 uniapp强制弹出键盘_uni-app_02

但我这边试了一下,在focus的时候去拿着e.detail.height-keyHeight,对于我这边试了还是不行(我的测试机是苹果7plus)。

所以我就索性就不设置false

2.设置true的时候,这里又有一个问题,就是我这边做的样式是两个相互切换的,相当于图一是没有触焦的情况下,可以打招呼/收藏/点赞/分享,图二是被触焦弹起来的样子,因为是两种样式不一样的,用:focus控制两种状态,这边发现根本弹不出软键盘就直接关掉了,直接触发了blur,这里搜了很多种解决办法,后面发现IOS需要主动点击才能聚焦,所以用了延时操作(图三),键盘就可以顺利弹出来。

uniapp iOS 键盘高度调整 uniapp强制弹出键盘_输入框_03

uniapp iOS 键盘高度调整 uniapp强制弹出键盘_前端_04

 

uniapp iOS 键盘高度调整 uniapp强制弹出键盘_键盘高度_05

 过程中(试验bottom的时候,没有延时问题),在键盘弹出来的时候,图二的发送发现点击不了,一点击就触发了输入框的blur方法,键盘就直接收起来了,就变成了图一的状态,就发不出去,后面的解决方案是,禁止穿透/阻止默认事件就可以解决。

 

uniapp iOS 键盘高度调整 uniapp强制弹出键盘_输入框_06

 

至于其他的,前段事件写过一次聊天界面的输入框,他是根据消息数,有3条以上就给他true,以下就不弹出,根据键盘高度去定位,有时候定了稍微高点点了问题也不大,因为没有消息压到他。

但是小程序同样的第一种实现方式 获取到的height就很准确

uniapp iOS 键盘高度调整 uniapp强制弹出键盘_输入框_07

uniapp iOS 键盘高度调整 uniapp强制弹出键盘_uni-app_08