解决微信小程序键盘遮挡住输入框

问题：微信小程序聊天输入框点击后，键盘弹出挡住输入框。2、给发送消息的盒子一个bottom。为监听到的键盘的高度。

本文主要记录uniapp: IOS微信小程序输入框部分被软键盘遮挡问题及解决方案

输入框在页面最底，当你将页面滑到最底时，点击输入框没问题；但是页面没有滑到最底时，就会出现键盘弹出遮住输入框 解决方案： 注意事项：功能代码要放在页面滚动后面 案例如下： wx.createSelectorQuery().select('#container').boundingClientRect( (rect) => { // 使页面滚...

问题：安卓没有问题，键盘弹出时，自动把窗体上移了，ios其实也上移窗体了，但是问题时仍然遮挡了输入框，这个是微信小程序默认属性adjust-position控制的，默认既是true，在网上搜索，很多要监听窗体事件，手动修改滚动的，但都太麻烦了，最终解决了，只需要给input添加了两个属性。这个属性是设定了输入光标和键盘的距离，默认是0，给到一个距离就可以把页面再上推一段距离，就可以实现不遮挡输入框了。这个属性我理解的是讲input绑定为同一层级，避免文字被推出框外。

获取 event 下的 detail 下的 height 这三次 任何一个拿不到就直接赋值0。bindkeyboardheightchange是一个小程序官方事件 用于监听键盘高度的变化。但当真的运行在手机上时 就会发现 这键盘一弹出来 就挡住我们的输入框了。我们这里就可以在这个事件中 将键盘高度赋值给focusHeight。我在这里写了个输入名称的头 在电脑上看着这输入效果还是挺优秀的。这个就可以按键盘高度 设置与底部距离 从而在键盘上面了。然后 给我们弹层 加上一个固定定位。

现在需要实现一个功能，当在微信小程序点击聚焦输入框时，页面自动滚动，使输入框显示在弹出的键盘上方，避免被键盘遮挡。iso的微信小程序自带这个优化，不需要额外处理。安卓或其他系统的微信小程序需要这个处理。

ios在小程序上弹起键盘挡住了输入框 要求我在点开页面的时候自动弹起键盘，我使用了input组件内的cursor-spacing属性，但是发现在ios上会出现错位的bug，后面我就使用了onKeyboardHeightChange这个方法，微信原生的应该也一样可以使用的 在input的父组件上给一个相对定位或者fixed定位，动态的去赋值bottom内的值，ios需要-1px，注意：在input输入框内要加上:adjust-position="false"键盘弹起时，是否自动上推页面，这样就能解决这...

1.在textarea中添加adjust-position="{{false}}"属性，禁止键盘弹出时页面的自动滚动。3.将获取的键盘高度绑定到底部textarea的外部容器上。2.在onLoad()中添加监听键盘弹起事件，获取键盘高度。

情景复现： 点击按钮弹窗遮罩层，底部有个input输入框，点击输入框要唤起软键盘，如果不做处理，软键盘会遮住fixed定位的元素 官方给出的解决方案是在input框上设置cursor-spacing属性https://developers.weixin.qq.com/miniprogram/dev/component/input.html 这个地方一定要带单位，如果不带单位写数值的话，默认单...

微信小程序已经帮我们解决了，只需要在input里面添加cursor-spacing属性即可 <input cursor-spacing="200" type="text" />

问题：默认没有点击input输入框（评论框）的时候：   点击了input组件，键盘弹起时，自动上推页面，默认键盘弹窗弹出到位置是input组件输入聚焦位置（就是输入框的光标一直闪烁的位置）；所以就是没有设置input组件和键盘的位置距离导致的覆盖相关样式现象。 解决方法： 1：可以设置cursor-spacing 的属性距离 2：使用bindfocus、bindblur 操作函数来...

adjustResize：软键盘弹出时，webview窗体高度挤压。屏幕高度=webview窗体高度+软键盘高度。adjustPan：软键盘弹出时，webview窗体高度不变，但窗体上推，以保证输入框不被软键盘盖住。缺点：软键盘在弹出时会因为webview的重绘，导致软键盘所处区域在未显示完全时显示黑底。以下为官方对keyboardheightchange事件的解释。在页面的pages.json中的style中做以下修改。keyboardheightchange 方法。在代码中添加如下处理。

解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移 问题 转发自https://www.cnblogs.com/XHappyness/p/13528236.html#4703250 存在问题 做了一个记录页面（类似单方聊天页），输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见 需要实现效果： 比如一个记录页面，需要在键盘弹出时： 底部的输入框跟随键盘上弹 页面头固定在顶部不动 聊天信息区域（即内容区）调整高度，该区域局部滚动 解决方法 底部输入框fixed定位在底部，使用输