【经验分享】解决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 这个插件来获取时区,同时获取带时区的时间字段,以便后续业务处理。
1454 1
ECharts 提示框组件Tooltip属性大全(包含文本注释)
ECharts 提示框组件Tooltip属性大全(包含文本注释)
2326 0
|
1月前
|
存储 弹性计算 固态存储
阿里云服务器实时优惠:云服务器99元1年,轻量云服务器38元1年,最新优惠汇总
阿里云推出了一系列覆盖至2029年的长效优惠活动,旨在为不同规模的用户提供高性价比的上云方案。其中,面向个人开发者和学生的经济型e实例(2核2G)年费仅需99元,而面向初创企业的通用算力型u1实例(2核4G)年费为199元,两者均支持新购与续费同价。此外,还有每日限量抢购的38元/年轻量应用服务器,以及针对AI开发、企业出海、迁云等特定场景的组合套餐与专项补贴。用户可根据自身需求,通过叠加各类优惠券,选择最适合自己的云服务器配置与方案。
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
4156 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
小程序 前端开发 IDE
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
2069 7
|
小程序 JavaScript 前端开发
7.9K star!跨平台开发从未如此简单,这个开源框架让APP开发效率飙升!
Lynx 是一个革命性的跨平台开发框架,使用 TypeScript 开发即可同时构建 iOS、Android 和 Web 应用。通过创新的布局引擎和原生渲染技术,让开发者用一套代码实现三端同屏效果,大大提升整体的开发效率!
1121 0

热门文章

最新文章