微信小程序input组件键盘遮住问题（或者modal里面的input遮住）

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 2k累计阅读 2k平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄10年

关注

原创最新推荐文章于 2026-08-04 14:10:35 发布 2k 阅读 AI 写同款· GEO 优化 ›

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

微信小程序已经帮我们解决了，只需要在input里面添加cursor-spacing属性即可

 <input cursor-spacing="200" type="text" />

收录于

微信小程序(1)

当前文章被收录于：

微信小程序(1)

7 篇文章 1 人学习

分享一些解决方案

订阅专栏查看详情

当前文章被以下社区和专栏收录：

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

相关推荐

微信小程序聊天输入框被键盘遮挡？5分钟搞定bindkeyboardheightchange事件监听

本文详细解析了微信小程序中聊天输入框被键盘遮挡的常见问题及其解决方案。核心在于利用bindkeyboardheightchange事件监听键盘高度变化，并动态调整输入框定位，实现输入框随键盘升降而完美跟随。文章还深入探讨了问题根源、不同机型的适配要点，并提供了封装可复用组件的进阶实战指南，帮助开发者打造流畅的聊天交互体验。

weixin_42513870的博客 346

微信小程序输入框属性 cursor-spacing 问题

问题描述: 微信小程序输入框唤起键盘时，键盘上边缘与小程序输入框下边缘零像素排列影响页面整体美观。解决方法:小程序输入框设置属性cursor-spacing=‘10’ 即可完美解决。

qq_34737189的博客 3420

微信小程序 - 获取软键盘高度解决键盘弹出挡住输入框情况，点击textarea、input框唤起键盘并动态获取键盘高度彻底处理软键盘弹出后挡住底部输入框的问题（完美兼容安卓Android与苹果ios）

微信小程序中点击input框唤起键盘，动态获取键盘高度，微信小程序通过获取键盘高度解决键盘弹出挡住输入框问题，底部输入框获取键盘高度动态设置，iOS微信小程序键盘弹出时输入框被挡住，小程序底部input输入框，键盘弹起时页面整体上移问题解决，当input输入框位于页面底部时，输入框聚焦后键盘弹起，页面会整体上移，将输入框所在位置定位到键盘上方，微信小程序如何获取软键盘高度，uniapp输入框被软键盘遮挡的问题，微信小程序键盘弹出挡住输入框问题解决方案，解决微信小程序底部textarea被键盘遮挡的问题，底部

🏆 前端领域优质创作者 4911

微信小程序防止输入框被键盘遮住

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

here962464的博客 1万+

基于OpenCV C++实现工业级形状模板匹配：仿Halcon SBM算法全解析

在计算机视觉和工业自动化领域，模板匹配是一项基础且关键的技术，用于在图像中定位已知目标。其核心原理是通过计算图像区域与预设模板之间的相似度来识别目标位置。传统的基于灰度值的匹配方法对光照变化敏感，鲁棒性不足。而基于边缘梯度方向的形状匹配技术，通过计算轮廓梯度方向的一致性进行相似度度量，从根本上提升了对光照变化的鲁棒性，并支持目标的旋转与缩放，技术价值显著。这项技术广泛应用于工业视觉检测、机器人引导、PCB定位等对精度和稳定性要求极高的场景。本文聚焦于使用开源OpenCV库，从底层仿照Halcon的Shape

weixin_33691817的博客 500

emqx Java 订阅以及发送结合若依框架

Spo的博客 1613

微信小程序 详解弹框wx.showToast、wx.showModal、wx.showActionSheet，modal控件解释及input输入框值的获取

一、wx.showToast wx.showToast({ title: '失败',//提示文字 duration:2000,//显示时长 mask:true,//是否显示透明蒙层，防止触摸穿透，默认：false icon:'success', //图标，支持"success"、"loading" success:function(){ },//接口调用成功 fail: function (...

小屁孩大帅-保密的博客 6528

Anolis龙蜥内核升级实战：从查询到配置的全流程指南

本文提供了一份详尽的Anolis龙蜥操作系统内核升级实战指南。文章从升级的必要性出发，逐步讲解了升级前的系统检查与备份、从官方源获取正确内核包、分步安装与验证、配置默认启动项以及升级后的功能验证与安全回滚方案。旨在帮助运维人员安全、平稳地完成内核升级，以获取性能提升、新硬件支持及重要的安全漏洞修复。

qq_27496129的博客 571

input框点击出现蓝色背景，uniapp项目，这是ios系统手机独有的问题，安卓和window系统没有。要在点击的标签里面加上 -webkit-tap-highlight-color

uniapp项目，要实现下拉框可搜索的功能，uniapp官方组件和uview都没有这个功能的组件。input框点击出现蓝色背景，uniapp项目，这是ios系统手机独有的问题，安卓和window系统没有。然后在pages.json里的自动扫描配置里添加这个插件，让uniapp自己扫描，这样就可以全局用了。在这个插件文件里，在最顶部写/* eslint-disable */有时下载的插件文件会报错，这和我们的eslint检查有关，要想不报错。然后给这个插件要进行类型声明，和自己写全局组件的类型声明一样。

Frank_colo的博客 956

[机器学习] 第二章模型评估与选择 2.ROC：roc_curve原理及源代码详解

代码见：https://github.com/Carrie-Yi/machine_learning/tree/main/roc_curve

心宝的博客 1493

6、探索音乐结构中的统一性：贝多芬《英雄交响曲》第一乐章的深度剖析

本文深入剖析了贝多芬《英雄交响曲》第一乐章的音乐结构，探讨其统一性的来源及表现形式。通过主题与动机、和声与调性、旋律与节奏、织体与动态等多方面的分析，揭示了这部作品在技术层面和情感表达上的卓越成就。

b9c0d的博客 518

uniapp之app、微信小程序实现输入框发送消息键盘不收起、解决iOS端键盘弹起遮挡输入框问题

uniapp微信小程序、APP输入框发送消息不失焦问题解决，uniapp iOS键盘遮挡输入框问题解决

qq_55460954的博客 8455

一文看懂EMMC原理及工作过程

CMD：用于设备初始化和命令传输的双向通道， CMD信号有2种工作模式：1#：漏极开路--->用于初始化模式2#：推拉--->用于快速命令传输其中命令从eMMC主机控制器发送到eMMC设备，响应从设备发送到主机。DAT [7:0]：双向数据信号，模式包括：1（DAT0）；默认情况下，通电或重置后，只有DAT0用于数据传输。DAT信号在推挽模式下工作，eMMC设备包括数据线DAT1-DAT7的内部上拉。进入4位模式后，设备立即断开线路DAT1、DAT2和DAT3的内部上拉；

Airer_00的博客 2031

uniapp: IOS微信小程序输入框部分被软键盘遮挡问题

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

q1003675852的博客 2880

【文献笔记】CVPR 2023|Attention-Based Point Cloud Edge Sampling

优点能够有效采出点云数据的边缘点分类任务性能优越不足没有设计出一个更好的上采样方法，导致分割任务的性能略低只考虑了边缘特征，没有利用其他几何特征。

m0_55908255的博客 319

【华为OD机试真题新系统】1043、魔法咒语组合 | 机试真题+思路参考+代码解析（C++、Java、Py、C语言、JS）

【华为OD机试真题新系统】1043、魔法咒语组合 | 机试真题+思路参考+代码解析（C++、Java、Py、C语言、JS）华为od机试，华为od机试真题，华为od机试E卷，华为odE卷，华为od机试真题E卷，华为OD，华为OD机试，华为OD机试真题，华为od机考，华为od机试D卷，华为od机试真题D卷，华为od手撕代码，华为od，华为od机试C卷，华为od e卷，华为2026e卷，od机试，2026E卷，华为OD机试E卷，什么是华为od，华为od介绍，全面了解华为od，2026华为od，如何备战华为od

KJ.JK 281

微信小程序输入框的一些问题

1.微信小程序处理软键盘弹出布局上移遮住输入框的解决方法相信很多人在开发微信小程序时都遇到这个问题，当你在小程序上预览时，底部的input在聚焦时弹出的软键盘会把input框遮住一小部分，不管是inpu还是textarea 给他们设置cursor-spacing属性就可以解决这个问题了。以input作为例子 <input placeholder='请输入初试专业...

Candy_mi的博客 1万+

霍尼韦尔SoftMaster使用说明

解决uni小程序在IOS端input框被软键盘‘挤上去’的问题

结果是能解决但处理的方式不好，会留出很大的空隙，影响美观，后面又产生在input获取焦点和失去焦点上想办法做处理但这样的感觉会跳一下，觉得不是很好，让弹出框滑动出软键盘的高度，参考的很多办法，实现起来无疑同ui说，帮我重新设计一下，bug改好等于重做。本人前端小白一枚，偶然遇到在ios端input框被遮挡的问题，十分苦恼，也尝试了很多解决办法但都不是很有效，最后在一位大牛的帮助下得到解决，想记录一下分享一下，如果你也遇到可以尝试一样看看！若有更好的解决办法，还望告知！然后给父元素动态添加高度就可以了。

qq_43549412的博客 2914

文档：亲测可用解决vnc灰屏，黑屏，鼠标大黑叉情况

主要解决vnc-viewer灰屏，黑屏，鼠标大黑叉等现象，详细见文档。

WINCC7.3破解文件

WINCC7.3硬件够破解文件，有需要的下载！WINCC7.3硬件够破解文件，有需要的下载！

微信小程序中，ios系统下，用户总是遇到在输入密码或验证码的输入框中输入，光标总是往最前面跑，可以设置cursor解决

微信小程序中，ios系统下用户总是遇到在输入密码或验证码的输入框中输入，光标总是往最前面跑，可以设置cursor解决

weixin_43517190的博客 575

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术，以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索，主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式，计算机控制系统的数学描述与基本分析方法，以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移问题

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

小羊的博客 1万+

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

input、textarea都有这个属性。

bigboss_666的博客 1012

微信小程序：ios弹出键盘遮挡底部input框且把文字挤出输入框

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

CY_WINT的博客 2055

解决微信小程序底部textarea被键盘遮挡的问题

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

lifeiyang313的博客 2542

小程序ios软键盘弹起挡住input输入框

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

weixin_46481295的博客 2367

微信小程序把玩（二十三）modal组件

modal弹出框常用在提示一些信息比如：退出应用，清楚缓存，修改资料提交时一些提示等等。常用属性：wxml <button bindtap="listenerButton" type="primary">弹出modal</button> <modal title="退出应用" hidden="{{hiddenModal}}

FUCK 2万+

微信小程序之----弹框组件modal

wxml:<modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮" cancel-text="自定义取消按钮" bindcancel="cancel" bindconfirm="confirm" no-cancel="{{nocancel}}"> 这是对话框的

Emperor_Y的博客 7855

上一篇：记录一下今天接手工作的坑（2020-08-26）

下一篇：谷歌插件开发总结

微信小程序聊天输入框被键盘遮挡？5分钟搞定bindkeyboardheightchange事件监听

weixin_42513870的博客

03-12

346