> 版权声明：本文为博主原创文章，未经博主允许不得转载。文章底部留言可联系作者。 ## 一、底部输入框实现多行输入在做小程序过程中做底部输入框的时候，希望可以实现同微信类似的多行输入。 ![微信多行输入效果](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a89ebeb87ffd4abaa6885341ff43753c~tplv-k3u1fbpfcp-zoom-1.image) 小程序实现效果如下： ![小程序多行输入效果](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ee342d7eb1449cca11da7c713fa7512~tplv-k3u1fbpfcp-zoom-1.image) 主要是利用小程序`textarea`组件的[`auto-height`](https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html)属性。 ```

```

## 二、iphoneX以上机型底部适配
iphoneX以上机型底部会出现空白，要做适配首先在`app.js`中判断iphoneX以上机型。

```
App({
  onLaunch: function () {
    let _self = this;
    wx.getSystemInfo({
        success: res => {
            let modelmes = res.model;
            if (/^iphone\s((x|x[rs])|1[1-9])/.test(modelmes.toLowerCase())) {
                _self.globalData.isIphoneX = true
            }
        }
    })
  },
  globalData: {
    isIphoneX: false, //判断iphoneX以上机型
  }
})
```
然后在需要进行判断的页面进行操作：
1. wxml：

```
<view class="container">
  <view class="{{isIphoneX ? 'fix-iphonex' : ''}}">
    <view>
      <textarea auto-height />
    </view>
    <view>发送</view>
  </view>
  <view class="{{isIphoneX ? 'fix-iphonex-banner' : ''}}"></view>
</view>
```
2. wxss:

```
/* 适配iphoneX */
.fix-iphonex{
  bottom:68rpx!important;
}

// after伪类方式
.fix-iphonex-button::after {
    content: ' ';
    position: fixed;
    left: 0;
    bottom: 0!important;
    height: 68rpx!important;
    width: 100%;
    background: #fff;
}

// 如果after伪类不好使，在对应文件下新增空白view标签，对其设置iphonex兼容样式
.fix-iphonex-banner{
  position: fixed;
  left: 0;
  bottom: 0!important;
  height: 68rpx!important;
  width: 100%;
  background: #fff;
}
```
3. js部分
```
const app = getApp()

Page({
  data: {
    isIphoneX: app.globalData.isIphoneX,
  },
})

```

效果图：
![iphonex以上机型底部适配效果](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/36fd5fb7284e4605b5d95376ec09891b~tplv-k3u1fbpfcp-zoom-1.image)

## 三、输入框获得焦点时不上推页面，但是希望输入框在软键盘上方
效果图如下：
![输入框在软键盘上方](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3753dcd628ec4a95b696c6e86472aa69~tplv-k3u1fbpfcp-zoom-1.image)
#### 原理:
`adjust-position`的值来控制键盘弹起时是否自动上推页面，通过`bindfocus`来获取键盘高度，使`input/textarea`输入框聚焦时跟随键盘上移而不被遮挡，输入框失去焦点时触发`bindblur`事件，输入框恢复原位。

wxml部分：
```
  <view class="chat-input" style="bottom:{{bottom}}px">
    <view class="chat-text">
      <textarea 
        adjust-position="{{false}}"
        bindfocus="onFocus" 
        bindblur="onBlur"
      />
    </view>
  </view>
```
wxss部分：
```
/* 输入框部分 */
.chat-input{
  display: flex;
  box-sizing: border-box;
  position: fixed;
  bottom: 0rpx;
  overflow: hidden;
  font-size: 28rpx;
  padding: 14rpx 20rpx;
  background-color: #fff;
  box-shadow:0rpx 4rpx 12rpx 0rpx rgba(0,0,0,0.2);
  z-index: 1000;
}
.chat-input .chat-text textarea{
  box-sizing: border-box;
  line-height: 30rpx;
  width: 100%;
  background-color: #f0f0f0;
}
```
js部分：
```
const app = getApp()

Page({
  data: {
    bottom: 0, // 输入框距离底部距离
  },
  onFocus(e) {
      console.log('onFocus', e.detail.height);
      // 获取焦点时，让iphoneX下的白色底条样式取消
      this.setData({
          bottom: e.detail.height
      })
  },
  onBlur(e) {
      // 丢失焦点时，让iphoneX下的白色底条样式加上
      this.setData({
          bottom: 0
      })
  },
})

```

## 四、以上内容代码
小程序代码片段：
https://developers.weixin.qq.com/s/eRmCOIm479fn

参考文章：
1. [小程序textarea](https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html)
2. [小程序Input 输入框聚焦时上推页面](https://www.jianshu.com/p/ca5fba94d438)</article></body></html>