小程序中，点击按钮或者图标，弹出输入框和键盘

和微信的评论区一样，点击评论按钮，才出现输入框和键盘

HTML

<text bindtap="ShowInput">点击出现input框和键盘</text>

<!-- 点击 上面的出现input框 -->
<view class="input-section" wx:if="{{isShowInput}}">
  <input class='input_input' model:value="{{inputmessage}}" focus="auto" placeholder="请输入内容" bindinput='bindInputMsg' bindblur="onHideInput" confirm-type="send" bindconfirm="sendTextMsg" />
  <view style="height:110rpx;width:170rpx;display:flex; align-items: center;justify-content: center;">
    <button class="send_button" size="mini" bindtap="add">添加</button>
   </view>
</view>

 JS

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
   
    isShowInput: false, //控制输入栏
  },
 
  //点击出现输入框
  showInput: function() {
    this.setData({
      isShowInput: true
    })
    console.error('show+++++++++++')
  },

  //隐藏输入框
  onHideInput: function() {
    this.setData({
      showInput: false
    })
    console.error('hide+++++++++++')
  },
 
})

 CSS

.input-section {
    position: absolute;
    display: flex;
    align-items: center;
    height: 110rpx;
    bottom: 0rpx;
    left: 0rpx;
    right: 0rpx;
    z-index: 500;
    background: #fff;
}
 
.input_input {
    background: #fff;
    margin-top: 12rpx;
    z-index: 500;
    width: 580rpx;
    height: 110rpx;
    padding-left: 35rpx;
 
}