uniapp使用输入框固定在底部键盘弹起把输入框挡住问题

最新推荐文章于 2024-04-27 13:01:21 发布
最新推荐文章于 2024-04-27 13:01:21 发布
阅读量1.7k 收藏 6
点赞数
文章标签： uni-app 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FUFCY/article/details/127105983
版权

 给input输入框设置cursor-spacing这属性就好

 

SY_FC
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uniapp(全端兼容) - 实现点击输入框时完美顶起键盘，获取键盘高度动态计算顶起距离，解决软键盘弹出时输入框被覆盖问题，uniapp微信小程序/移动端h5网页/安卓苹果app（示例代码，一键复制
高级前端工程师
03-07 2191
uniapp，支付宝微信小程序，移动端H5网页网站，软键盘弹出位置不对，软键盘挡住了输入框怎么办，获取键盘高度计算弹出距离，uniapp如何解决输入框input激活后键盘弹出遮挡问题，uniapp输入框偶尔被键盘遮挡，解决uniapp在App环境下输入框被软键盘遮挡的问题，uniapp 完美解决苹果和安卓input框遮挡兼容问题，uniapp输入框拉起软键盘时，输入框显示不全，被软键盘挡住一半，input被键盘遮挡的解决方案，软键盘遮挡输入框，uniapp软键盘顶不起来输入框，输入框没有被软键盘弹出来怎么办
从此不再担心键盘遮住输入框(OC)
04-05
源码KeyboardToolBar，从此不再担心键盘遮住输入框(OC)，想必大家在iOS开发中都有遇到过这种问题。点击输入框后，弹出的键盘遮挡了输入框，然后你就无法看见你输入了什么。为了解决这个问题，我也在网上花了不少时间去找相关的代码以及实现。 找到的相关内容很多，但是都有一个共同点，是通过将底部的View上滑至键盘之上，从而可以看见输入框内的内容。在这方面做得好的有IQKeyboardManager，喜欢的可以去看看，但是我不是就直接采用了IQKeyboardManager，而是自己写了一个键盘组件KeyboardToolBar，优点是小巧易使用
解决uni-app软键盘弹起以后遮住底部input框问题
w161513820的博客
01-26 3063
解决方法：:adjust-position=“true” 设置为true就好了 <input class="solid-bottom" :adjust-position="true" :focus="false" maxlength="300" cursor-spacing="10" @focus="InputFocus" @blur="InputBlur"></input>
小程序 uni-app input 输入框被键盘遮挡部分
caihuawei123的博客
11-07 1488
解决办法是： 添加 cursor-spacing 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
转-解决uni-app输入框被键盘挡住问题
博客
03-21 8719
存在问题 做了一个记录页面（类似单方聊天页），输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见 需要实现效果： 比如一个记录页面，需要在键盘弹出时： 底部的输入框跟随键盘上弹 页面头固定在顶部不动 聊天信息区域（即内容区）调整高度，该区域局部滚动 解决方法 底部输入框fixed定位在底部，使用输入框的@focus获取键盘高度，更改输入框bottom；@blur时恢复bottom=0； 使用包含页面头和内容区 container的padding-bottom设置为输入框高度+输入
聊天uniapp 微信小程序以及安卓app键盘弹出会把底部fixed定位的textarea输入框覆盖掉的解决方法
qq_38407674的博客
02-13 1600
虽然加了100vh后，但是聊天窗口底部还是会被遮挡，这怎么办那？办法就是：把内框view设置成95vh，小于100vh就行。将pages.json文件在指定的页面中加入以下配置 “softinputMode”: “adjustResize”2.设置最外层页面高度应为 100vh。1.设置pages.json文件。的高度设置为100vh。
uniapp input 被键盘遮挡的解决方案
WangYan的博客
03-16 3740
在uniapp登录页遇到了input被键盘遮挡的和一点击输入框（或两个输入框来回切换输入）页面就闪现刷新的问题。闪现/刷新：用uniapp自身的。标签，替换uview的。遮挡：增加三个标签属性。
解决uniapp在App环境下输入框被软键盘遮挡的问题
qq_41120857的博客
12-04 2035
adjustResize：软键盘弹出时，webview窗体高度挤压。屏幕高度=webview窗体高度+软键盘高度。adjustPan：软键盘弹出时，webview窗体高度不变，但窗体上推，以保证输入框不被软键盘盖住。缺点：软键盘在弹出时会因为webview的重绘，导致软键盘所处区域在未显示完全时显示黑底。以下为官方对keyboardheightchange事件的解释。在页面的pages.json中的style中做以下修改。keyboardheightchange 方法。在代码中添加如下处理。
uniapp输入框被键盘遮挡及热更新
a806488840的博客
05-19 1079
用plus.downloader.createDownload+plus.runtime.install方法解决。1.这里要用apk包，我之前用HBuild生成的wgt一直没反应，也有可能是我没把app放到应用市场的原因咯。然后web-view的高度不能设置定高，可以用top和bottom来间接的设置高。2.打包的时候包名要与上个版本的包名统一，否则会被认为不是一个app。1，解决web-view中网页的输入框被键盘遮挡。需要在manifest.json文件中设置。2.解决uniapp热更新。
uniapp软键盘遮挡输入框问题
a666666000的博客
07-05 2377
【代码】uniapp软键盘遮挡输入框问题。
uniapp固定在最底部的input评论框弹起键盘会有遮挡效果解决方式
Blue54的博客
04-01 4647
通过给view或者input标签样式：position: fixed;把input固定在底部。点击input框后弹出键盘会导致遮挡住消息框。 解决关键：举个栗子=》 :adjust-position='true' 这个关键的样式放在input标签后。触发键盘弹起后，会把页面上顶。简单方便。解决弹出键盘后input框被遮挡的问题。 例图： 看见这个栗子了没有？ 我也没看见 ...
Swift让输入框跟随键盘弹起避免输入输入法挡住输入框问题
09-01
主要介绍了Swift让输入框跟随键盘弹起避免输入输入法挡住输入框问题的完美解决方案，本文分步骤给大家介绍的非常详细，需要的朋友可以参考下
安卓输入框被虚拟键盘挡住的问题(微信开发)
09-02
主要介绍了安卓输入框被虚拟键盘挡住的问题(微信开发)的相关资料,需要的朋友可以参考下
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
09-01
在使用ionic开发ios系统微信的时候遇到一个bug，在填写表单的时候键盘会挡住输入框。下面小编给大家带来了ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)，非常不错，有需要的朋友参考下吧
移动端固定输入框在底部会被键盘遮挡的解决方法(必看篇)
08-28
下面小编就为大家分享关于移动端固定输入框在底部会被键盘遮挡的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
iOS项目开发键盘弹出遮挡输入框问题解决方案
01-05
UITextField和UITextView，前者是单行输入文本框，后者是可滑动的多行输入文本框，在这整个开发过程中，我们需要控制键盘的弹出和收起、在输入结束的时候获取输入的信息，此外，我们还需要保证在键盘弹起的时候不...
【uniapp/ucharts】采用 uniapp 框架的 h5 应用使用 ucharts（没有 uni_modules）
花间半盘棋
04-26 356
然后按照图片中 README 所写的方式在项目中进行导入；下载的文件是如图所示的路径；就可以正常显示图表啦。
uniapp视频播放器（h5+app）
最新发布
farme_guan的博客
04-27 925
这是关于一篇在uniapp使用video视频播放器，支持自定义播放器样式，支持手势操作，选集、倍数和清晰度切换，支持SRT字幕格式。
优雅实现uniapp返回上一页传参
meteorites的博客
04-26 410
优雅实现uniapp返回上一页传参
uniapp，仿照小红书评论界面，点击输入框，底部弹出输入框和键盘
04-01
实现这个功能需要用到uniapp的组件和事件。 首先，在页面中添加一个textarea组件，用于用户输入评论内容： ``` <template> <view> <textarea class="comment-input" v-model="comment" placeholder="请输入评论内容" @focus="showInputBox" ></textarea> </view> <view :class="['input-box', {show: showBox}]"> <textarea class="input-textarea" v-model="comment" placeholder="请输入评论内容" @blur="hideInputBox" ></textarea> </view> </template> ``` 在组件中，使用v-model绑定comment变量，用于存储用户输入的评论内容。同时，在textarea的focus事件中调用showInputBox方法，显示底部的输入框。 ``` <script> export default { data() { return { comment: '', showBox: false } }, methods: { showInputBox() { this.showBox = true }, hideInputBox() { this.showBox = false } } } </script> ``` 在showInputBox方法中，将showBox变量设置为true，用于显示底部的输入框。在hideInputBox方法中，将showBox变量设置为false，用于隐藏底部的输入框。 最后，在底部的输入框中也添加一个textarea组件，并在blur事件中调用hideInputBox方法，用于隐藏输入框。 同时，需要添加CSS样式，用于控制底部输入框的显示和隐藏： ``` <style> .comment-input { height: 100px; border: none; outline: none; resize: none; font-size: 28rpx; padding: 20rpx; } .input-box { position: fixed; bottom: 0; left: 0; right: 0; height: 200rpx; background-color: #fff; transform: translateY(200rpx); transition: transform 0.3s ease-in-out; } .input-box.show { transform: translateY(0); } .input-textarea { height: 160rpx; border: none; outline: none; resize: none; font-size: 28rpx; padding: 20rpx; } </style> ``` 这样，就实现了仿照小红书评论界面的功能，点击输入框时，底部弹出输入框和键盘。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值