乐趣区

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

jiezi

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

获取焦点后的页面：

咱们查看 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,
    });
},

`

退出移动版