【经验分享】解决input placeholder光标漂移问题

简介: 【经验分享】解决input placeholder光标漂移问题

目前支付宝小程序input输入框在真机上,众所周知都有一些小问题,不是placeholder漂移啦,就是键盘弹起来错位了的问题。

文档上有做相对应的解释:

  • 小程序中 input 如果父类是 position: fixed,可以加上 enableNative="{{false}}",解决输入框错位/光标上移问题。个别情况下定位问题会导致光标错位,所以需要把 false 改为 true,代码块为 enableNative="{{true}}"。


以上文档的内容在安卓和ios上表现不一致。即安卓可能需要设置false,ios需要设置为true


目前优化操作如下:

在app.js里存储当前的手机系统型号:

onLaunch(options) {
  my.getSystemInfo({
    success: res => {
      // util.setStorageSync为我们封装的util方法
      util.setStorageSync('platform', res.platform) 返回值为 Android或者ios
    }
  })
},

然后在app.json的window对象中写下:

"window": {
  "enableInPageRenderInput": "YES"
 }


再然后是在写有input的页面做判断。

<input class="search-bar" a:if="{{platform === 'Android'}}" enableNative="{{false}}" placeholder="xxx" />
<input class="search-bar" a:else placeholder="xxx" />

platform为缓存里的platform。具体效果大家可拷贝代码真机调试下。

目录
相关文章
|
前端开发
前端Vue3使用Moment Timezone处理不同时区时间
认识基本时间表示字符,UTC,GMT等,用 moment-timezone 这个插件来获取时区,同时获取带时区的时间字段,以便后续业务处理。
1489 1
|
前端开发 JavaScript 容器
前端实现旗帜飘动效果系列 (Ⅰ):dom+css实现
hello,民娜桑~~我又来开新坑了( ̄ε(# ̄)╰╮o( ̄皿 ̄///),这次尽量保证把这个坑填完~本系列我会分四篇来完成主题,分别是① DIV+CSS的实现,② canvas2D的简单实现,③ canvas2D的进阶实现,④ webgl+着色器的实现 以及 ⑤ 包装成jquery插件并发布为npm模块 。
4265 0
|
Web App开发 JavaScript 前端开发
在使用Foldables.js库时,可能会遇到哪些常见问题及解决方法?
在使用Foldables.js库时,可能会遇到哪些常见问题及解决方法?
627 125
|
3月前
|
存储 弹性计算 固态存储
阿里云服务器实时优惠:云服务器99元1年,轻量云服务器38元1年,最新优惠汇总
阿里云推出了一系列覆盖至2029年的长效优惠活动,旨在为不同规模的用户提供高性价比的上云方案。其中,面向个人开发者和学生的经济型e实例(2核2G)年费仅需99元,而面向初创企业的通用算力型u1实例(2核4G)年费为199元,两者均支持新购与续费同价。此外,还有每日限量抢购的38元/年轻量应用服务器,以及针对AI开发、企业出海、迁云等特定场景的组合套餐与专项补贴。用户可根据自身需求,通过叠加各类优惠券,选择最适合自己的云服务器配置与方案。
|
算法 Linux Shell
Linux实用技能:打包压缩、热键、Shell与权限管理
本文详解Linux打包压缩技巧、常用命令与原理,涵盖.zip与.tgz格式操作、跨系统传文件方法、Shell运行机制及权限管理,助你高效使用Linux系统。
Linux实用技能:打包压缩、热键、Shell与权限管理
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
4195 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机