关于前端:微信小程序表单输入框与手机键盘

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

获取焦点后的页面：

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

进而去设置输入框的属性adjust-position为false
然而，这时会呈现一个问题，输入框会被弹出的键盘挡住，咱们无奈看到以后输入框输出的内容:
(操作：点击“21、”上面的输入框，能够发现键盘曾经把它挡住了)

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

而后去设置了发现没成果，前面就做了以下解决方案（仅集体以后见解）：
input输入框设置：

**wxml**
  <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}}"//会把数据传到输入框所有的事件中
   />

`
js

//获取焦点事件
onFocus(event) {
    let { height } = event.detail; //键盘高度
    let { name, ratio } = event.currentTarget.dataset;//输入框标签上设置的            data-name或data-ratio的值
    var query = wx.createSelectorQuery();//获取界面上的节点信息
    query.select(`.${name}`).boundingClientRect();
    query.selectViewport().scrollOffset();//加着一行，能力获取到以后页面滚动数           据
    query.exec((rect) => {
        let { scrollTop } = rect[1];//以后滚动间隔
        this.setData({
            scrollTop: scrollTop,//存以后滚动间隔
        });
         //依据相应场景设置
         //this.data.windowHeight为以后设施长度（也叫以后可视窗口长度）
         //把可视窗口分为七分，判断以后输入框在可视窗口的占比是否小于键盘高度
        if (this.data.windowHeight * (ratio / 7) < height) {
           //把以后页面长度设置的大一些，否则上面设置的滚动没成果
           //KeyboardHeight是设置页面长度是让页面长度+KeyboardHeight                            （KeyboardHeight初始值为0）
            this.setData({ KeyboardHeight: height * 0.56 + 1100 });
        }
      //设置页面滚动
        wx.pageScrollTo({
            selector: "#page", // 写法同css选择器
            scrollTop: scrollTop + height * 0.56,
        });
    });
},
//失去焦点事件
onBlur() {
    let { scrollTop } = this.data;
    this.setData({ KeyboardHeight: 0 });
//复原点击输入框之前的滚动地位
    wx.pageScrollTo({
        selector: "#page", // 写法同css选择器
        scrollTop: scrollTop,
    });
},

`