微信小程序踩坑之textarea软键盘遮挡解决方案(兼容安卓iOS)
可能这个方法不是最好的,但是目前的话测试是可以进行上线的一个效果,记录一下(我这里用到的是taro框架)需求:问题:真机下键盘弹起会遮挡最下边文本域的部分,用户在输入的时候会看不到输入的文字。且若手机属于长度比较长的时候,页面高度没有超过一屏,用户手动滑动也是没用的,如图期望:键盘弹起时页面随之向上推,将文本域暴露出来解决方案:1、直接利用自带的属性adjustPosition。缺点:会把我们fi
可能这个方法不是最好的,但是目前的话测试是可以进行上线的一个效果,记录一下(我这里用到的是taro框架)
需求:
问题:
真机下键盘弹起会遮挡最下边文本域的部分,用户在输入的时候会看不到输入的文字。且若手机属于长度比较长的时候,页面高度没有超过一屏,用户手动滑动也是没用的,如图
期望:
键盘弹起时页面随之向上推,将文本域暴露出来
解决方案:
1、直接利用自带的属性adjustPosition。 缺点:会把我们fixed在页面上方的自定义导航栏也推上去,效果很差,如图:
2、咱自己动手,首页整个页面用scrollView包裹,利用scrollTop属性向上推(推整个页面的高度这么多)。
思路:
得到焦点:时让scrollView高度减去一个高度(我这里是380,关于这个下面会解释),这样页面高度减小竖向出现滚动条,高屏手机也变为可滚动状态。scrollTop:viewHeight。viewHeight是高度缩小后的scrollView高度,使scrollView滚到底部。
输入完成失去焦点:scrollView恢复原来的高度,scrollTop:0回到顶部
但是这里有两个坑:
1、ios部分手机有bug,原本正常思路减少高度滚动到底部的操作放在onFocus里的话,会有键盘弹不起的情况,原因猜测是点击文本域时同时使scrollView滑动了,而scrollView滑动会导致键盘收起,产生了冲突。
解决办法:未获取焦点时在文本域上盖一个透明盒子,在此盒子的点击事件上进行想要的操作(缩高度+滚底部),失去焦点时再隐藏透明盒子防止影响正常输入。
2、安卓手机键盘收起时,有时候文本域并未失去焦点,因此咱们在onBlur里恢复高度等操作就得不到触发执行。
解决办法:
监听键盘收起事件再一次进行恢复工作,确保万无一失。如下onKeyboardHeightChange方法。
具体代码实现
<Textarea
value={content}
onInput={(e) => this.handleLeaveCommentsChange(e)}
maxlength={1000}
placeholderClass='leaveCommentHolderText'
placeholder='请勿在此处填写个人信息'
adjustPosition={false}
placeholderClass='complaintViewInputPlaceholder'
onKeyboardHeightChange={this.onKeyboardHeightChange.bind(this)}
focus={textAreaFocus}
onBlur={this.textAreaBlurHandle.bind(this)}
//onLineChange={this.onLineChange.bind(this)}
disableDefaultPadding
fixed
holdKeyboard
style={{ width: '100%', height: textAreaFocus ? '200px' : '200px' }}
/>
/* 透明层 */
{!textAreaFocus ?
<View className='transparentBox' onClick={() => this.clickTransparentBox()}></View> : null}
//点击透明层减小scrollview高度使之可滚动
clickTransparentBox() {
this.setState({
scrollViewHeight: global.ktxWindowHeight - global.ktxStatusHeight - 380
}, () => {
setTimeout(() => {
this.setState({
scrollTop: this.state.scrollViewHeight,
textAreaFocus: true
})
}, 0)
})
}
textAreaBlurHandle() {
//让页面滚到顶部
this.setState({
scrollViewHeight: global.ktxWindowHeight - global.ktxStatusHeight,
scrollTop: 0,
textAreaFocus: false
})
}
onKeyboardHeightChange(e) {
//安卓下会出现键盘收起焦点还未失焦,所以需要监听键盘进行操作 *注意:iOS该事件下最好不要进行操作,会有bug。
if (!global.isIos) {
let { height } = e.detail;
const isShow = height > 0
if (!isShow) {
//收起键盘
this.setState({
scrollViewHeight: global.ktxWindowHeight - global.ktxStatusHeight,
textAreaFocus: false
})
} else {
//弹起键盘
this.setState({
textAreaFocus: true,
})
}
}
}
⚠️ 上面减少高度减少的具体值为380 是一个调试出来的值,可能不同机型会有差距,其实用键盘的高度应该是比较可行的,但是由于获取键盘高度只能通过onFocus获取,如下
onFocus={this.textAreaFocusHandle.bind(this)}
textAreaFocusHandle(e) {
//获取键盘高度
let keyHeight = e.detail.height
}
但是咱们是点击透明层做的操作,不监听获取焦点事件,就。。。。暂时还没想到什么好方法,以后想到了再更吧,有小伙伴有更好的办法也也可以指出呀~
(整理的有点乱,我自己看足够了,如果有小伙伴感兴趣并且有疑问的话,也可以指出哈,我看到就会回答的,溜~)
更多推荐
所有评论(0)