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

相关文章
|
11月前
input点击后placeholder中的提示消息消失
input点击后placeholder中的提示消息消失
117 0
placeholder和value的区别
placeholder和value的区别
如何让input框在用户输入后,文字居中显示
如何让input框在用户输入后,文字居中显示
353 0
|
8月前
TDesign——Input指定光标插入内容
TDesign——Input指定光标插入内容
80 1
怎么让input框在用户输入后,文字居中显示
怎么让input框在用户输入后,文字居中显示
407 0
input中placeholder的鼠标操作事件
input中placeholder的鼠标操作事件
95 0
BootStrap让两个控件在一行显示(label和input同行)
BootStrap让两个控件在一行显示(label和input同行)
483 0
element中el-radio无法切换点击和input框无法输入的问题(整理)
element中el-radio无法切换点击和input框无法输入的问题(整理)