ios设备的弹窗页面,光标错位,光标乱跳

如果产品要求在移动端里有弹窗中多个ipnut,趁早找产品沟通不要弹窗,新起页面,此问题巨坑!巨坑!
如果产品要求在移动端里有弹窗中多个ipnut,趁早找产品沟通不要弹窗,新起页面,此问题巨坑!巨坑!
如果产品要求在移动端里有弹窗中多个ipnut,趁早找产品沟通不要弹窗,新起页面,此问题巨坑!巨坑!

一.经常是上下错位,原因是在input 获取焦点以后,键盘弹出后,会把页面往上顶着移动,但是光标停留在了以前的位置,如果页面不复杂,可以在获取焦点后给body上添加 position:fixed ,使用后清除,但是这样会引起页面失去滚动能力,页面中尽量使用absolute,或者是float,还有flex。

二.还有一种情况就是页面中有了弹窗,在弹窗中有多个input(一般大于2个)标签,会出现光标左右平移,或者光标乱跳,点了第一个光标去了第二个,
(1)、左右平移先给input加test-align:left;无效在找别的原因

(2)、此类问题大多解决办法都是把弹窗的fixed定位改为absolute 页面中不要出现fixed定位

(3)、或者是添加fastclick.js库,目前感觉此方法起不到什么作用。。

(4)、仔细观察页面,可以看到页面上的input先聚焦再滚动;也就是说,聚焦事件在页面滚动之前或者滚动完成之前就已经完成了,所以这时候页面滚动,而光标又不跟随滚动,就造成了光标跳行、错乱的问题。
解决方法:
1、输入框在聚焦的时候,会弹起软键盘;所以,我们监听软键盘弹起事件,在弹起事件后,进行dom重绘,但是这种必须要加延时处理
2、当页面出现滚动条时,弹框弹出后,页面回滚至顶部。在不改变原有弹框代码的情况下,有效地解决光标错位问题,但严重影响用户使用,可以给弹出层重新定位:获取滚动条高度,为弹窗重新设置top值;
3、弹框采用absolute定位后,关键是top值的确定ios Safari 输入键盘弹出时,若页面底部被挤压上去,则关闭弹框会复原到页面滚动到底部时的状态,若底部没被挤压上去,每弹出一次键盘,页面都会上去一定距离,且不复原,可以阻止页面的touchmove事件来实现固定底部页面的想法,
4、总结:给input加test-align:left;把页面所有fixed定位改为absolute,阻止页面滚动 或者 弹出后重新渲染页面 或者 监听更新弹窗top值 或者 在设计时不要在弹窗里多个input…巨坑!

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iOS软件弹窗dylib库编写是一种在iOS平台上开发和使用动态链接库的方法。动态链接库(Dynamic Library)是一种共享库,可以被多个应用程序同时使用,以提供特定功能或服务。 编写iOS软件弹窗dylib库需要以下步骤: 1. 创建一个新的Xcode项目。选择"Framework & Library"中的"Dynamic Library"模板。 2. 在项目中添加弹窗逻辑的代码,可以使用Objective-C或Swift语言来编写。 3. 将编写的逻辑封装为一个独立的类或函数,并在适当的位置调用。 4. 将编写的代码编译为dylib库,这可以使用Xcode的"Build"功能自动完成。 5. 导出dylib库文件,可以将其复制到其他项目中使用。 使用iOS软件弹窗dylib库的方法是: 1. 在需要使用弹窗功能的iOS应用项目中,导入dylib库文件。可以通过将dylib库文件直接拖拽到Xcode项目中来实现。 2. 在应用程序的源代码中,添加对dylib库的引用和使用。可以使用Objective-C的`dlopen`函数或Swift的`dyld`模块来加载和使用dylib库。 3. 根据dylib库中提供的API,使用需要的弹窗功能。 需要注意的是,dylib库的使用需要满足苹果的开发者政策和审核要求。在使用dylib库时,应确保遵循相关规定,并尽可能保证库文件的安全性和稳定性。 总结来说,iOS软件弹窗dylib库编写是一种在iOS平台上开发和使用独立动态库的方法。需要在Xcode中创建项目、编写弹窗逻辑、编译为dylib库,然后在其他应用项目中导入并使用该库。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值