文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-10-10 16:30

关注

事先声明!本人前端小白一枚,偶然遇到在ios端input框被遮挡的问题,十分苦恼,也尝试了很多解决办法但都不是很有效,最后在一位大牛的帮助下得到解决,想记录一下分享一下,如果你也遇到可以尝试一样看看!

先复现问题!

我这里是产生问题的环境是uni小程序 并且使用了u-popup的弹出框组件 里面的input产生的bug

说一下解决的历程

首先想到的是增加弹出框的高度 让input框里软键盘远一点(仅发现在ios端有问题 安卓没有)我做的处理是先判断机型是安卓还是苹果,然后增加input框父元素的高度,从而远离软键盘。

代码如下

            const info = wx.getSystemInfoSync()if (info.system.indexOf('Android') > -1) {console.log('安卓')} else {this.Bottom = 235console.log('ios')}

然后给父元素动态添加高度就可以了

结果是能解决 但处理的方式不好,会留出很大的空隙,影响美观,后面又产生在input获取焦点和失去焦点上想办法 做处理但这样的感觉会跳一下,觉得不是很好,让弹出框滑动出软键盘的高度,参考的很多办法,实现起来无疑同ui说,帮我重新设计一下,bug改好等于重做。。。

 直接说解决办法吧,在大牛的帮助下 两行代码解决了,同时也体现了自己对一下细节了解的还是不够深入,分析给大家 少走弯路吧!

 cursor-spacing="85rpx" :always-embed="true"

只需要给input框添加这两个属性就解决了

后面查询了官方文档是

cursor-spacing 指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 (其实这个我也试过,但还是会偶发的复现bug就放弃了)

always-embed 强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)

希望对你有用!若有更好的解决办法,还望告知!

来源地址:https://blog.csdn.net/qq_43549412/article/details/130429301

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯