微信小程序 - 弹出键盘遮挡住输入框 textarea

最新推荐文章于 2024-01-12 09:29:53 发布

weixin_34331102

最新推荐文章于 2024-01-12 09:29:53 发布

阅读量3.9k

点赞数 3

原文链接：https://my.oschina.net/hp2017/blog/1819169

版权

为什么80%的码农都做不了架构师？>>>

在小程序开发时候有时候会遇到这样问题，如果你使用 textarea 多行输入框时候，点击输入这时候会出现弹出键盘遮挡住输入框的情况，感觉很烦是不是。

那我就分享下我的解决方案吧，在 textarea 标签加入 cursor-spacing 属性设置一定的值即可。

一行代码搞定：（详情使用见 API ）

<textarea placeholder="请输入..." cursor-spacing='140' />

cursor-spacing 属性设置的值可以根据自己需要进行改变，效果如图。

水平有限，若有问题请留言交流！

互相学习，共同进步：）转载请注明出处谢谢！

转载于:https://my.oschina.net/hp2017/blog/1819169

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34331102

关注关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

uniapp(全端兼容) - 实现点击输入框时完美顶起键盘，获取键盘高度动态计算顶起距离，解决软键盘弹出时输入框被覆盖问题，uniapp微信小程序/移动端h5网页/安卓苹果app（示例代码，一键复制

高级前端工程师

03-07

3815

uniapp，支付宝微信小程序，移动端H5网页网站，软键盘弹出位置不对，软键盘挡住了输入框怎么办，获取键盘高度计算弹出距离，uniapp如何解决输入框input激活后键盘弹出遮挡问题，uniapp输入框偶尔被键盘遮挡，解决uniapp在App环境下输入框被软键盘遮挡的问题，uniapp 完美解决苹果和安卓input框遮挡兼容问题，uniapp输入框拉起软键盘时，输入框显示不全，被软键盘挡住一半，input被键盘遮挡的解决方案，软键盘遮挡输入框，uniapp软键盘顶不起来输入框，输入框没有被软键盘弹出来怎么办

微信小程序点击出现弹窗

qq_45656036的博客

09-01

1506

1.现在page文件里面定义一个dh的文件，然后在component定义一个可复用的组件为dislog 然后在dh的json文件中引入这个组件 { "usingComponents": { "dialog":"../../component/dialog/index" } } 2.dh中.js文件 // pages/dh/index.js Page({ data: { status:false }, handleTap(){ this.set

参与评论您还未登录，请先登录后发表或查看评论

微信小程序fixed定位元素中的textarea聚焦时被键盘遮挡

u010281877的博客

05-09

4648

微信小程序fixed定位元素中的textarea聚焦时被键盘遮挡场景描述BUG复现预期输入时效果BUG表现解决方案1 修改弹窗定位方式2 修改文档流布局总结场景描述用户点击某选项，弹出一个表单弹窗，弹窗中有使用textarea组件，当用户点击输出框输入时，键盘遮挡到textarea组件原本的文字，textarea组件悬浮到键盘上方并遮挡其他内容 BUG复现这是一个代码片段预期输入时效果 ...

微信小程序----键盘弹出挡住输入框问题解决方案

最新发布

weixin_46561899的博客

01-12

3056

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

[uniapp 小程序]textarea input 弹出键盘遮挡部分页面问题解决

kouryoushine的博客

12-20

4852

背景 uniapp聊天中弹出键盘遮挡了输入框，如下 ## 解决方案天假参数cursor-spacing参数值代表距离输入框距离键盘的距离 ## 修改后

微信小程序 textarea 组件中手机软键盘挡住内容的处理方案

Mr_Chao的博客

03-22

1471

微信小程序 textarea 组件中手机软键盘挡住内容的处理方案查看开发文档设置并增大 cursor-spacing的值，可以完美处理textarea内容被键盘遮挡问题

微信小程序：cursor-spacing属性解决输入框遮挡键盘问题

在微信小程序开发过程中，开发者可能会遇到一个常见的问题，即当用户需要输入文本（如用户名、手机号或地址）时，手机键盘的弹出会遮挡输入框，导致用户体验下降。这个问题可以通过设置`cursor-spacing`属性来解决。...

微信小程序真机测试时Textarea内字符滚动错位和键盘遮挡文本框问题的解决

weixin_43616676的博客

10-05

1203

微信小程序真机测试时Textarea内字符滚动错位和键盘遮挡文本框问题的解决

h5底部输入框被键盘遮挡_微信 H5 页面兼容性解决方案

weixin_39528029的博客

10-25

1060

最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。出现原因分析：通常我们...

UI登陆页面素材|让设计师在竞争中脱颖而出

awayaya1的博客

10-27

239

登陆页面是网站最重要的部分之一。虽然主页需要为所有访问者提供一切，但登陆页有非常具体的功能和要求。精通着陆页面设计——创建转换的着陆页面——可以让设计师在竞争中脱颖而出。在设计登陆页面时，要记住以下8件事 1. 利用已建立的模式大多数登录页面看起来都很相似是有原因的。多年来，我们测试了不同的登录页面创建模式，结果出现了一些明显的变化。虽然可以尝试其他模式，但要知道其他模式很可能已经被其他人尝试过并放弃了，以支持转换得更好的布局。 2. A / B测试每个着陆页面都需要测试。A/B测试，即你一次改变和

微信小程序实战七：输入弹框的实现

博主逸尘

10-21

1251

文章目录1.界面效果2.界面布局3.页面逻辑4.源码修改 1.界面效果 2.界面布局 <view> <uni-popup ref="popup" type="dialog"> <uni-popup-dialog mode="input" type="info" title="PIN码" placeholder="请输入PIN码" :before-close="true" @confirm="dialogInputConfirm" @close="closeDia

微信小程序弹窗有输入框且可以使用名文和密文输入

God_qsang的博客

03-11

1029

wxml: <view class="made_box" wx:if="{{passShow}}"> <view class="main"> <view class='title'> <view class="f-f">请输入直播间密码</view> </view> <view class="inputeara"> <input class="input" pla...

微信小程序软键盘弹出的问题

qq_43487181的博客

12-20

5016

微信小程序软键盘弹出的问题这里记录一个微信中开发的一个小问题， 1.当我开发这个页面功能的时候在缩小的状态正常情况聚焦时在手机上会有一个软键盘弹出来完全遮住了我textarea输入框 2.遮住状态这个时候我们还发现页面被顶了上去，头部的导航栏没有了 3.解决问题 html部分 /防止页面被顶我们使用adjust-position属性 <textarea name="" id=""...

微信小程序键盘不覆盖输入框

WliU_LI的博客

08-02

1100

实现微信小程序键盘不覆盖输入框，即聚焦时输入框被键盘上推而不覆盖。解决：输入框添加属性adjustPosition，主要代码： <Input adjustPosition type="text" placeholder="点击输入，向已经购买过的9990人提问" value="" /> 实现效果如下： ...

小程序底部输入框输入时总是被输入法遮住解决方法

挚友阳光的博客

11-17

1580

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

苹果微信input输入框被键盘遮挡

weixin_30586085的博客

01-04

1379

最近一个项目，input输入框需要在页面的最下面（position：fixed），这样，当键盘获取焦点的时候，苹果自带键盘不会挡住输入框，但是搜狗输入法的键盘就会挡住。可以用以下方法解决： document.activeElement.scrollIntoViewIfNeeded(); 　当input标签获取焦点时，调用以上方法，就可调整当前页面，让页面中元素不被键盘挡住。 ...

小程序键盘挡住底部输入框解析

前端技术

10-17

1572

** 底部是单行输入框： ** 因为是当行输入框，可用小程序组件自带的cursor-spacing（光标到键盘的距离），设置输入框到键盘的距离即可 ** 底部是多行输入框textarea ** 解题思路：输入框会被键盘挡住，是因为输入框的高度没有键盘高度高，可将输入框与底部的距离设置为键盘的高度即可编写样式，判定输入框获取焦点时，将输入框与底部的padding / height 增加； bin...