微信小程序表单输入框与手机键盘

当输入框获取焦点时，键盘就会被弹出，这时会出现一个问题，页面会被往上顶，我们自定义导航栏区域就会顶上去：

未获取焦点时的页面：

 

我们查看https://developers.weixin.qq.com/miniprogram/dev/component/in...的input输入框的api发现了：

进而去设置输入框的属性adjust-position为false
但是，这时会出现一个问题，输入框会被弹出的键盘挡住，我们无法看到当前输入框输入的内容:
(操作：点击“21、”下面的输入框，可以发现键盘已经把它挡住了)

 

这时去查了一下资料，发现：

然后去设置了发现没效果，后面就做了以下解决方案（仅个人当前见解）：
input输入框设置：

wxml

<view
        id="page"
        style="margin-top: {{height+34}}px;width:{{width*0.95}}px;padding-bottom: {{KeyboardHeight}}px;"
    >
  <input
         class="bloodNeutrophilPercentage"
         name="bloodNeutrophilPercentage"
         model:value="{{bloodNeutrophilPercentage}}"
         type="text"
         placeholder="请填写"  
         adjust-position="{{false}}"//取消键盘弹出时自动上推页面
         bind:focus="onFocus"//获取焦点事件
         data-name="bloodNeutrophilPercentage"//会把数据传到输入框所有的事件中
         bind:blur="onBlur"//输入框失去焦点事件
         data-ratio="{{1}}"//会把数据传到输入框所有的事件中
   />
</view>

app.js

globalData: {
        windowHeight: "",
        windowWidth: "",
        height:""
    }, 
onLaunch() {
        wx.getSystemInfo({
            success: (res) => {
                this.globalData.height = res.statusBarHeight;
            },
        });
    },
    onShow(options) {
        this.globalData.windowWidth = wx.getSystemInfoSync().windowWidth;
        this.globalData.windowHeight = wx.getSystemInfoSync().windowHeight;
    },

js

data:

{

    height: app.globalData.height * 2 + 20,

    width: app.globalData.windowWidth,

    windowHeight: app.globalData.windowHeight,

    bloodNeutrophilPercentage: null, KeyboardHeight: 0,

}, /

//获取焦点事件
onFocus(event) {
    let { height } = event.detail; //键盘高度
    let { name } = event.currentTarget.dataset;//获取不同输入框名称
    let { windowHeight } = this.data;//当前设备高度
    //获取元素节点信息
    var query = wx.createSelectorQuery();
    query.select(`.${name}`).boundingClientRect();
    query.selectViewport().scrollOffset();
    query.exec((rect) => {
        let current = rect[0]; //当前输入框位置信息(top、bottom)
        let { scrollTop } = rect[1]; //当前滚动距离
        this.setData({
            scrollTop: scrollTop,//把当前滚动条位置保存
        });
        const bottom = windowHeight - current.bottom; //输入框距离底部的位置
        if (bottom < height) {//当输入框距离可视区域底部位置小于键盘高度时
            //当输入框被遮挡时
            let distance = height - bottom;
       //只有通过增设置padding-bottom足够的值让页面有足够的长度，滚动方法才能生效
            this.setData({
                KeyboardHeight: height + 1100,
            });
            wx.pageScrollTo({
                selector: "#page", // 写法同css选择器
                scrollTop: scrollTop + distance+20,
            });
        }
    });
},
//失去焦点事件 
onBlur() { 
    let { scrollTop } = this.data; 
    this.setData({ KeyboardHeight: 0 }); //恢复点击输入框之前的滚动位置 
    wx.pageScrollTo(
        { 
            selector: "#page", // 写法同css选择器
             scrollTop: scrollTop, 
        }); 
},