【经验分享】解决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 自定义分享封面
1412 2
|
前端开发
前端Vue3使用Moment Timezone处理不同时区时间
认识基本时间表示字符,UTC,GMT等,用 moment-timezone 这个插件来获取时区,同时获取带时区的时间字段,以便后续业务处理。
1369 1
ECharts 提示框组件Tooltip属性大全(包含文本注释)
ECharts 提示框组件Tooltip属性大全(包含文本注释)
2214 0
uniapp动态禁用mescroll-body组件的下拉刷新,或者动态禁用mescroll-body组件的上拉加载
uniapp动态禁用mescroll-body组件的下拉刷新,或者动态禁用mescroll-body组件的上拉加载
919 0
|
小程序 计算机视觉
UNIAPP微信小程序使用Echarts
UNIAPP微信小程序使用Echarts
4920 0
|
9月前
|
JSON JavaScript Android开发
原生与 Uniapp 的通信机制是如何实现双向调用的?
原生与 Uniapp 的通信机制是如何实现双向调用的?
1191 137
Vue3 父组件调用子组件方法($refs 在setup()、<script setup> 中使用)
Vue3 父组件调用子组件方法($refs 在setup()、<script setup> 中使用)
2889 0
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
2105 0
|
编解码 JavaScript 前端开发
使用 MediaSource 规范实现自适应流播放
【10月更文挑战第26天】通过以上步骤,就可以使用MediaSource规范实现自适应流播放,根据网络状况动态地调整播放的码率,为用户提供更流畅的观看体验。需要注意的是,实际应用中还需要处理更多的细节和错误情况,以确保播放的稳定性和可靠性。
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
4061 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机