微信小程序——弹出并隐藏键盘（带有输入框，可编辑）

点击按钮唤起键盘并且键盘上带有输入框，点击发送或者空白处可将输入的内容发送到指定的顶部输入框，不理解的可以私聊本人哦！！！

1、编辑好静态文件 

.HTML文件


  
  编辑


.css文件

.editView{
  width: 100%;
  height: 110rpx;
  background-color: rgb(35, 36, 35);
  display: flex;
  flex-direction: row;
}
.editView input{
  width: 580rpx;
  height: 90rpx;
  background-color: #fff;
  line-height: 60rpx;
  margin: 10rpx 0 10rpx 20rpx;
  border-radius: 10rpx 0 0 10rpx;
  padding-left: 20rpx;
}
.editView .editBtn{
  border-radius: 0 10rpx 10rpx 0;
  width: 130rpx;
  height: 90rpx;
  margin: 10rpx 20rpx 10rpx 0;
  text-align: center;
  align-self: center;
  background-color: rgb(19, 197, 19);
  line-height: 90rpx;
  font-weight: 600;
  color: #fff;
  font-size: 30rpx;
}

效果图：

 2、在“编辑”按钮中加点击事件

.js文件  
  data: {
    focus:false,
    isEdit:false
  },

  // 点击得到焦点
  clickBtn(){
    this.setData({
      //当focus为true时，键盘将弹出
      focus:true,
      bottom:0,
      // isEdit:true
    })
  },

 效果图：

 3、编辑要隐藏的输入框

.html文件


    


.wxss文件
/* 弹出内容样式 */
.input{position: fixed;left: 0;right: 0;height: 90rpx;}

#area-input{background: #2e2d2d; color: #fff;height: 90rpx;font-size: 34rpx;width:710rpx;margin: 0 auto;border-radius: 5px;padding-left: 20rpx;}

效果图：

 4、通过弹出事件：bindfocus和隐藏事件：bindblur来实行弹出隐藏

.JS文件
  //弹出事件
  foucus: function (e) {
    var that = this;
    that.setData({
      isEdit:true,
//焦点聚集，底部输入框需要被键盘顶起，此时bottom高度就是键盘高度
      bottom: e.detail.height,
    });
    if(e.detail.height==0){
      //键盘自带发送或回车或换行或空格键，点击收起键盘，此时判断键盘高度为0，则收起键盘，拿到自己输入的值
      that.setData({
        isEdit:false,
        inputContent:e.detail.value,
      })
    }
  },
  //隐藏事件  此时可以点击除开键盘以外的空白处收起键盘
  blur:function(e){
    var that = this;
    that.setData({
      //当失去光标时，键盘隐藏，bottom时输入框与键盘的距离，此时为0
      bottom:0,
      isEdit:false,
      //inputContent这是你输入需要的内容后，隐藏键盘，把内容发送给顶部输入框
      inputContent:e.detail.value,
    })
  },

 点击“编辑”按钮出现的效果图：

 

点击“发送”后内容赋值给顶部输入框的效果图：

点击键盘以外的空白处收起键盘，同时复制给顶部输入框的效果图：

注意：【博主会持续更新关于微信小程序的一些小分享，感谢各位的关注，期待未来的更多作品趴】

好了，希望可以帮到你哦！！