可能这个方法不是最好的,但是目前的话测试是可以进行上线的一个效果,记录一下(我这里用到的是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
  }

但是咱们是点击透明层做的操作,不监听获取焦点事件,就。。。。暂时还没想到什么好方法,以后想到了再更吧,有小伙伴有更好的办法也也可以指出呀~

(整理的有点乱,我自己看足够了,如果有小伙伴感兴趣并且有疑问的话,也可以指出哈,我看到就会回答的,溜~)

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐