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

目录
相关文章
|
8月前
input点击后placeholder中的提示消息消失
input点击后placeholder中的提示消息消失
104 0
|
8月前
|
数据安全/隐私保护
【鸿蒙软件开发】文本输入(TextInput/TextArea)
【鸿蒙软件开发】文本输入(TextInput/TextArea)
1222 0
|
8月前
简单粗暴实现el-input只允许输入数字
简单粗暴实现el-input只允许输入数字
简单粗暴实现el-input只允许输入数字
|
8月前
|
前端开发 数据安全/隐私保护
清除IE10下input的(X)和密码输入框的眼睛图标
清除IE10下input的(X)和密码输入框的眼睛图标
73 0
|
前端开发
input输入框内阴影效果
input输入框内阴影效果
117 1
|
前端开发 数据库
input输入框自动消除空格
input输入框自动消除空格
119 0
element中el-radio无法切换点击和input框无法输入的问题(整理)
element中el-radio无法切换点击和input框无法输入的问题(整理)
|
前端开发 JavaScript
【Layui】对于input框有时候点击后没有反应
【Layui】对于input框有时候点击后没有反应
694 0
【Layui】对于input框有时候点击后没有反应