微信小程序中最底部的input框输入的时候会被键盘盖住

最新推荐文章于 2024-03-28 10:23:19 发布
最新推荐文章于 2024-03-28 10:23:19 发布
阅读量768 收藏 10
点赞数 10
分类专栏： 微信小程序相关问题及知识点合集 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44866810/article/details/135237087
版权
本文介绍了HTMLinput标签中的cursor-spacing属性，它用于设置光标与键盘的距离，取input距离底部和指定值的最小值。适合于关注Web开发细节的开发者，尤其在微信开放文档中应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 使用cursor-spacing属性值

<input cursor-spacing="100" placeholder="请输入"/>
cursor-spacingnumber

指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

input | 微信开放文档

解决uni小程序在IOS端input框被软键盘‘挤上去’的问题
qq_43549412的博客
04-28 2645
结果是能解决 但处理的方式不好，会留出很大的空隙，影响美观，后面又产生在input获取焦点和失去焦点上想办法 做处理但这样的感觉会跳一下，觉得不是很好，让弹出框滑动出软键盘的高度，参考的很多办法，实现起来无疑同ui说，帮我重新设计一下，bug改好等于重做。本人前端小白一枚，偶然遇到在ios端input框被遮挡的问题，十分苦恼，也尝试了很多解决办法但都不是很有效，最后在一位大牛的帮助下得到解决，想记录一下分享一下，如果你也遇到可以尝试一样看看！若有更好的解决办法，还望告知！然后给父元素动态添加高度就可以了。
小程序制作仿微信聊天的细节处理
fortune丶的blog
06-02 3256
记录做的一次仿聊天的小程序碰到的一些细节 问题： 1.键盘输入框随内容自动增高 2.每次发完消息屏幕在发出消息的最底部（以及上拉在最上面） 3.键盘弹起不盖住屏幕内容 解决： 一、解决输入框内容的自动增高 如上图一样输入内容变多之后自动换行，而且限制高度（高度我们用max-height限制就好了） 那么我们来看看我们怎么让内容自动换行吧。 input 我们都知道输入...
微信小程序----键盘弹出挡住输入框问题解决方案
weixin_46561899的博客
01-12 4124
问题：微信小程序聊天输入框点击后，键盘弹出挡住输入框。2、给发送消息的盒子一个bottom。为监听到的键盘的高度。
小程序 键盘挡住底部输入框解析
前端技术
10-17 1631
** 底部是单行输入框： ** 因为是当行输入框，可用小程序组件自带的cursor-spacing（光标到键盘的距离），设置输入框到键盘的距离即可 ** 底部是多行输入框textarea ** 解题思路：输入框会被键盘挡住，是因为输入框的高度没有键盘高度高，可将输入框与底部的距离设置为键盘的高度即可 编写样式，判定输入框获取焦点时，将输入框与底部的padding / height 增加； bin...
uniapp开发小程序输入框拉起软键盘时，输入框显示不全，被软键盘挡住一半
最新发布
weixin_45041493的博客
03-28 1152
在input或者textarea添加:cursorSpacing="20"留出光标到软键盘的距离。在开发过程中，input或者Textarea聚焦时，出现遮挡一半的情况。
vue或者移动端h5页面input框被输入法键盘遮盖问题
彤先森的博客
01-22 1648
vue或者移动端h5页面input框被输入法键盘遮盖问题
【小程序】文本框聚焦时，弹出的键盘遮挡住文本框如何处理
九日的博客
12-07 1526
现在需要实现一个功能，当在微信小程序点击聚焦输入框时，页面自动滚动，使输入框显示在弹出的键盘上方，避免被键盘遮挡。iso的微信小程序自带这个优化，不需要额外处理。安卓或其他系统的微信小程序需要这个处理。
微信小程序实现多视频video采坑，上下滑动视频
02-27 2万+
小程序做滑屏视频，按照h5的思路开发。一路采坑…… 尝试: 第一次：relative布局，使用translateY来实现实时上滑。直接借鉴H5的思路。 页面布局relative，一个视频宽度空间充满屏幕。 每次向下只多加载一个视频，每次只保持页面存储三个屏幕的内容，也就是三个视频，向上滑动一次，再渲染一个视频。监听手势滑动，改变当前可视区域的translateY。嗯，可以的。 然后第一步...
微信小程序仿朋友圈，实现点赞和评论功能
热门推荐
weixin_43784256的博客
01-12 2万+
本文 主要讲 大概的实现，思路。有不同想法的可以私信我。 首先的话是准备工作 布局   自己模拟的后台传送数据 commandArraylist:[ { userUrl:'/assets/logo/jiatui-logo.jpg', articleUrl:'/assets/images/simple.jpg', usern...
完美解决手机网页中输入框被输入法遮挡的问题
11-27
之前要做一个弹出对话框，填写信息，发现在手机上看的时候，较后的输入框在填写信息时，输入框被输入法遮挡，只能盲填。 前提 1.弹出的对话框用display:fixed定位的 2.对话框大小固定 解决办法 css部分 （dlg-top与...
微信小程序通过获取键盘高度解决键盘弹出挡住输入框问题
weixin_45966674的博客
10-25 4022
获取 event 下的 detail 下的 height 这三次 任何一个拿不到就直接赋值0。bindkeyboardheightchange是一个小程序官方事件 用于监听键盘高度的变化。但当真的运行在手机上时 就会发现 这键盘一弹出来 就挡住我们的输入框了。我们这里就可以在这个事件中 将键盘高度赋值给focusHeight。我在这里写了个输入名称的头 在电脑上看着这输入效果还是挺优秀的。这个就可以按键盘高度 设置与底部距离 从而在键盘上面了。然后 给我们弹层 加上一个固定定位。
解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移 问题
小羊的博客
10-12 1万+
解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移 问题 转发自https://www.cnblogs.com/XHappyness/p/13528236.html#4703250 存在问题 做了一个记录页面（类似单方聊天页），输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见 需要实现效果： 比如一个记录页面，需要在键盘弹出时： 底部的输入框跟随键盘上弹 页面头固定在顶部不动 聊天信息区域（即内容区）调整高度，该区域局部滚动 解决方法 底部输入框fixed定位在底部，使用输
微信小程序踩坑之textarea软键盘遮挡解决方案（兼容安卓iOS）
qq_41594043的博客
11-19 6559
可能这个方法不是最好的，但是目前的话测试是可以进行上线的一个效果，记录一下（我这里用到的是taro框架） 需求： 问题： 真机下键盘弹起会遮挡最下边文本域的部分，用户在输入的时候会看不到输入的文字。且若手机属于长度比较长的时候，页面高度没有超过一屏，用户手动滑动也是没用的，如图 期望： 键盘弹起时页面随之向上推，将文本域暴露出来 解决方案： 1、直接利用自带的属性adjustPosition。 缺点：会把我们fixed在页面上方的自定义导航栏也推上去，效果很差，如图： 2、咱自己动手，首页整个页面用
微信小程序输入框属性 cursor-spacing 问题
qq_34737189的博客
05-07 3133
问题描述: 微信小程序输入框唤起键盘时，键盘上边缘与小程序输入框下边缘零像素排列 影响页面整体美观。 解决方法:小程序输入框设置属性cursor-spacing=‘10’ 即可完美解决。
微信小程序防止输入框被键盘遮住
here962464的博客
07-30 1万+
情景复现： 点击按钮弹窗遮罩层，底部有个input输入框，点击输入框要唤起软键盘，如果不做处理，软键盘会遮住fixed定位的元素 官方给出的解决方案是在input框上设置cursor-spacing属性https://developers.weixin.qq.com/miniprogram/dev/component/input.html 这个地方一定要带单位，如果不带单位写数值的话，默认单...
微信小程序开发初学：输入框 - input
Dae_Lzh的博客
01-27 1万+
输入框。 input具有的属性 value 类型：String 默认值：无 输入框内的初始内容 type 类型：String 默认值：text 输入内容的类型 type属性的合法值 （1）text：输入文本 （2）number：输入数字（弹出数字键盘） （3）idcard：输入身份证（弹出身份证输入键盘） password 类型：boolean 默认值：false 是否为密码类型（输入内容显示为圆点） placeholder 类型：String 默认值：无 提示词 placeholder-class 类型：
解决微信小程序输入文本时候页面上移
记录本人工作中遇到的问题、经验总结以及分享。
04-15 1451
把这个值设为同input、textarea一样的高度即可，注意单位。默认开始，可以忽略，注意兼容性即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值