微信小程序踩坑之textarea软键盘遮挡解决方案（兼容安卓iOS）_tetarea设置了maxleng后遮挡文本内容怎么处理

可能这个方法不是最好的，但是目前的话测试是可以进行上线的一个效果，记录一下（我这里用到的是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}
	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//点击透明层减小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,
        })
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

⚠️ 上面减少高度减少的具体值为380 是一个调试出来的值，可能不同机型会有差距，其实用键盘的高度应该是比较可行的，但是由于获取键盘高度只能通过onFocus获取，如下

onFocus={this.textAreaFocusHandle.bind(this)}
1

  textAreaFocusHandle(e) {
    //获取键盘高度
    let keyHeight = e.detail.height
  }
1
2
3
4

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

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