支付宝小程序input 输入框在 iOS 客户端的光标漂移问题

最新推荐文章于 2025-03-17 09:28:08 发布
最新推荐文章于 2025-03-17 09:28:08 发布
阅读量560 收藏
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44705979/article/details/131532810
版权
针对iOS16系统中输入框出现的光标漂移问题，可以采取两种解决方案。首先，检查代码中是否设置了input的enableNative属性，如果设置了，需要移除这个属性。其次，在app.json的window配置中，设置enableInPageRenderInput为YES，这有助于修复光标定位问题。

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

问题描述：IOS16输入框出现光标漂移问题
解决方案：步骤一：若已在 input 中设置了 enableNative 属性，删除 enableNative 属性的全部设置。
步骤二：在 app.json 文件 window 对象内，设置 “enableInPageRenderInput”:“YES”。
在这里插入图片描述
在这里插入图片描述

大力水手~
关注
微信小程序input、textarea快速删除时光标会跳到最后
梁雨季™的博客
12-30 1972
问题描述：快速删除textarea输入框中间的文字，但删除过程中，光标就会自动跳到最后去，苹果机和安卓机都这样 原因：input用了bindinput监听？，在开发工具中有时输入中文都困难。 1.节点 <textarea placeholder="请输入资料、描述等" maxlength="200" value="{{args.desc}}" bindinput="userInput" id='args.des'> </textarea> <view cl
小屏ios页面恢复是光标错位
springLilly的博客
11-23 271
移动端页面的定位会影响光标位置，相信很多人都遇到过，然而在整个页面没有用到定位的情况下还是遇到了光标错位的问题。 尤其是小屏的ios手机，原因是移动端在点击input输入的时候软键盘弹出，整个页面被键盘往上挤压，然而光标的位置也被挤压，收起软键盘的时候页面恢复，但是光标还是在原来input的位置，（输入验证码点击发送按钮，键盘会自动收起来，使页面恢复） 就导致光标不在该在的地方，整个页面呈现无法点击的状态，向上点击就会点击到input框，实际上原来input的框并不能点击， 在软键盘收起(也就是失焦)的时候
IOS中input光标跑偏问题的解决方法
weixin_30673715的博客
07-16 424
ios端兼容input光标高度处理 在最近的项目中遇到一个问题，input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上 当点击输入的时候，光标的高度和父盒子的高度一样。造成的原因就是给父盒子添加了height和line-height 当点击输入的时候，光标的高度就自动和父盒子的高度一样了。（谷歌浏览器的设计原则，还有一种可能就 是当没有内容的时候光标的高度等于inp...
微信小程序中，ios系统下，用户总是遇到 在输入密码或验证码的输入框中输入，光标总是往最前面跑，可以设置cursor解决
最新发布
weixin_43517190的博客
03-17 192
微信小程序中，ios系统下用户总是遇到 在输入密码或验证码的输入框中输入，光标总是往最前面跑，可以设置cursor解决
支付宝小程序 input输入框在 ios上光标错位问题
业余前端的职业经历
07-28 2322
很难受 这个问题不知道为啥官网不解决 如果说外层元素 使用 弹性布局 那么里面的那个 input输入框 得光标就会发生错位 1.外层元素不用 弹性布局 设置成 绝对定位或者是 相对定位 <view style="display:flex;"> <input /> </view> 2.给 input元素加上一个 enableNative="{{false}}" <view style="display:flex;"> <input enableNa
支付宝小程序iOS端input输入框键盘光标错位原理猜测与验证和实现（既：如何使用原生的输入框替代h5的输入框达到光标、清空按钮、字体、键盘等h5无法实现的样式定制）
qq_15509071的博客
09-02 2058
运行官网下载的demo 查看页面结构可以看到就是一个单纯的webview: 然后点击”最大长度“这个输入框 发现光标错位 看一下页面结构 发现多了一个原生的输入框 <H5KeyboardField: 0x7fbe57985a00; baseClass = UITextField; frame = (131 138.5; 160 25); text = ''; opaque = NO; tag = 2; gestureRecognizers = <NS...
input输入框在IOS手机上偏移问题
gaoyu007的博客
07-19 1992
问题：input输入框在IOS手机上，由于placeholder字体小于输入框字体，导致placeholder字体偏上显示。 解决方案：placeholder属性，设置line-height: normal; padding-top: 0.4rem(2px)。就可以。 类似支付宝还花呗-提前还款页面。input输入框问题。 input::-webkit-input-placeholder padding-top .4rem line-height normal 注意 ：父级元素不要设置diaplay: fl
解决苹果手机中出现input中光标下移（错位）问题
cheng_zhang_zhong的博客
01-19 5033
其中出现这种问题是因为在页面上我们使用了position: fixed;的属性 这里我的业务逻辑是点击抢购》》弹出抢购的form表单，这里因为我必须还是要使用position: fixed; 1、解决方案：当弹出弹框的时候，我设置body{position: fixed;},当关闭弹窗的时候将清除body{position: fixed;},样式 这样子光标将不会错位。 Vue.js i...
css web页面实现一个弹窗
且听风吟的博客
07-13 3732
css web页面实现一个弹窗
input输入框中的光标在ios上乱跳的问题
热门推荐
小圣贤君的博客
10-30 1万+
最近一个项目中碰到一个问题： 在一个页面中点击一个按钮会出现一个弹出框，这个弹出框给了fixed定位，并且宽高都等于100%，在这个弹出框中有包含input输入框的div,这个div未做定位设置。页面操作中看不出来什么问题，真机操作的时候会发现，安卓上没有问题，但是在ios上就出现问题了，尤其是ios11系统上，问题表现非常明显。在输入框输入内容的时候，手机下方会弹出一个键盘，然后输入框中光标就跟
uniapp小程序，部分 ios 真机测试出现 input 输入框内容 跳动 问题
叶子的博客
05-29 4288
uniapp小程序，部分 ios 真机测试出现，input输入框内容 跳动 等问题
解决小程序搜索框输入时的闪动问题
thankseveryday的专栏
07-05 875
解决思路：由于在用户不断输入的同时，会不断的触发搜索事件。所以设置一个定时器，延缓搜索的执行，等待用户停止输入的时候再进行查询。 let timer = null // 搜索框 searchContentChange: function (e) { let keyWords = e.detail.value ? e.detail.value : null let that = this // 清除，定时器 if (timer) { clearTimeout(t
ios下微信小程序中input框漂移问题
qq_41539461的博客
12-22 1092
不断尝试的过程中发现，如果删除小程序，重新进入，第一次进入这个购物车页面的时候，不论如何滑动，这个input框都是正常显示的，离开页面第二次进入就会出现错位的问题，这时候这个bug原因就变的清晰了起来。一旦明确了这个问题，我就尝试了一种最简单的方法，在弹窗上增加了v-if判断，强制每次进入都重新渲染一遍，至此，困扰半个月的问题解决了。最近开发一个弹窗购物车的时候出现了滑动弹窗时里面的数字input框错位的问题，上微信社区看了好多问答仍然没有解决。同时这个问题还是一个兼容性问题，只在苹果手机上出现。
支付宝小程序-输入框引起的页面bug
xsaid的博客
05-18 392
视频中上方文字都是正常的文档流，下方输入框当触发焦点的时候偶尔会出现页面回滚到顶部并且向下移动一个软键盘的距离。给最外层的盒子限制高度并且设置overflow-y:scroll;最初页面的滚动使用的是元素高度自动撑开出现滚动条，这是一个不容易看出的bug分享，先看视频！完美解决这个bug！
微信小程序输入框光标从中间删除跳到最后bug解决
weixin_45145119的博客
02-25 3225
原因：双向绑定导致数据发生更新导致光标跑到最后。 1.使用textarea标签， 2.将双向绑定v-model改为:value绑定数据 3.重新定义一个变量，在input事件里面把e.detail.value复制给这个变量 4.在提交的时候把重新定义的变量赋值给:value绑定的变量 5.清空时把这两个变量都清空 ......
支付宝小程序input的小坑
weixin_30783629的博客
07-19 1530
//axml<input class="internet_input" value="{{payNo}}" onInput="keyNum" controlled={{true}} type="text" /> 　 //js keyNum(e) { e.detail.value=e.detail.value.replace(/[\u4e0...
IOS-input元素光标偏移乱跑，是什么原因
weixin_34314962的博客
10-12 965
这中情况只会出现在一些ios手机上，是兼容性的问题，当然我没有认真的确认过是出现在那些ios系统上的； 之所以出现这种情况，肯定是在input上或TA的父元素上用到了position:fixed; 目前在IOS上，针对position:fixed;这个是兼容性很差的 所以我们在写input相关样式时，拒绝添加fixed的属性样式，可以相对定位，可以float... 转载于:https://w...
支付宝小程序input框苹果端错位问题
objectking的博客
12-05 1841
网上看到很多说，ios输入文字不会及时显示出来，或一些光标在input 以外的情况，这些都属于是错位的问题，不知道还有没有其他类型的手机出现过类似bug。ios是必定有这种bug的。解决方法。 1.如果你input框的父级是用的flex 布局。如果容易改的情况下，建议不用flex 布局。定位使用相对或者绝对定位 2.如果改起来很麻烦。就在父级 加一段代码enableNative="{{false}...
mPaaS小程序一些记录
Dreamy smile
11-26 1509
mpaas 小程序介绍 mPaaS 小程序，源自于支付宝小程序框架，继承了支付宝小程序框架的易开发性、跨平台性以及 Native 性能，不仅帮助开发者实现面向自有 App 投放小程序，还可快速构建打包，覆盖支付宝、淘宝、钉钉等应用。 基于 mPaaS 小程序，开发者能够快速优化发布包大小，节省流量和存储。同时，服务迭代不再受发版限制，快速发布，快速迭代。甚至，基于统一的开发标准，小程序仅需开发一次，便可快速投放至多端 开发 1、使用支付宝小程序开发工具，选择mpaas小程序。 2、前端开发还是.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值