为了更好的讲解这个Bug,我给出三份代码片段
//index.wxml
bindblur="blur"
placeholder="abcdefghijklmnopqrstuvwxyz"
placeholder-class="{{focus?'focus':'blur'}}"/>
//index.wxss
.focus{
color: blue;
background: green;
}
.blur{
color: red;
background: yellow;
}
//index.js
Page({
data: { focus: false },
focus: function () {
this.setData({ focus: true });
},
blur: function () {
this.setData({ focus: false });
}
});
------------------------------------------------------------------------------------------------
代码非常简单,
当输入框聚焦时,data.focus==true
当输入框失焦时,data.focus==false
placeholder-class属性与data.focus数据绑定
并监听data.focus中的数据变化,修改文字与背景样式
正常情况下,当输入框 失焦 时,文字应为红色,背景应为黄色
正常情况下,当输入框 聚焦 时,文字应为蓝色,背景应为绿色

------------------------------------------------------------------------------------------------
Bug①(仅出现在iOS平台):聚焦时文字颜色异常

------------------------------------------------------------------------------------------------
Bug②(Android与iOS平台同时存在):清空输入框后,背景颜色异常

------------------------------------------------------------------------------------------------
Bug③(仅出现在Android平台):在输入框聚焦与失焦状态下,小写英文字母,字体不一致

对比一下聚焦状态