【经验分享】解决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。具体效果大家可拷贝代码真机调试下。

目录
相关文章
|
前端开发 小程序
919. 【前端】Taro.useShareAppMessage 自定义分享封面
919. 【前端】Taro.useShareAppMessage 自定义分享封面
1320 2
|
前端开发
前端Vue3使用Moment Timezone处理不同时区时间
认识基本时间表示字符,UTC,GMT等,用 moment-timezone 这个插件来获取时区,同时获取带时区的时间字段,以便后续业务处理。
1304 1
ECharts 提示框组件Tooltip属性大全(包含文本注释)
ECharts 提示框组件Tooltip属性大全(包含文本注释)
2112 0
|
JavaScript
vue数据更新了但是页面不更新的解决方案
vue数据更新了但是页面不更新的解决方案
406 0
|
存储 前端开发 JavaScript
ahooks 正式发布:值得拥抱的 React Hooks 工具库
ahook定位于一套基于 React Hooks 的工具库,核心围绕 React Hooks 的逻辑封装能力,降低代码复杂度和避免团队的重复建设为背景,共同建设和维护阿里经济体层面的 React Hooks 库。
24339 1
ahooks 正式发布:值得拥抱的 React Hooks 工具库
uniapp动态禁用mescroll-body组件的下拉刷新,或者动态禁用mescroll-body组件的上拉加载
uniapp动态禁用mescroll-body组件的下拉刷新,或者动态禁用mescroll-body组件的上拉加载
875 0
|
小程序 计算机视觉
UNIAPP微信小程序使用Echarts
UNIAPP微信小程序使用Echarts
4736 0
|
人工智能 自然语言处理 安全
Anus:公开整活!完全用 Manus 复刻 Manus 功能的开源 AI 智能体项目
Anus 是一个开源 AI 智能体项目,复刻了 Manus 的部分功能,支持自然语言指令执行、多代理协作、多模态输入处理等功能,旨在为开发者提供强大且灵活的工具。
1381 1
Anus:公开整活!完全用 Manus 复刻 Manus 功能的开源 AI 智能体项目
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
2010 0
|
小程序 前端开发 IDE
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
1746 7

热门文章

最新文章