- 问题
小程序的input组件有个自身的bug,即当输入框获取焦点时placeholder内容会出现重影现象。 - 解决思路
原理:将placeholder内容单独写在另外的标签里,控制其显示隐藏。
操作:将代表placeholder内容的标签定位到input框上,在input输入事件中控制标签隐藏,在input失焦事件中若输入框内容为空时控制标签显示。 -
代码实现
// wxml文件 <view> <input placeholder='' value="{{username}}" bindinput="handleName" bindblur="blurAccount"></input> <text class="placeholder" wx:if="{{placeAccount}}">账号</text> </view> // js文件 data: {placeAccount: true}, handleName() { // input输入事件 this.setData({ placeAccount: false }) }, blurAccount() { // input失焦事件 if (!this.data.username) { this.setData({ placeAccount: true }) } }
相关文章:
- jquery获得焦点和失去焦点 2021-12-19
- 小程序中点击input控件键盘弹出时placeholder文字上移 2021-12-15
- 鼠标经过INPUT时自动获取焦点 2021-12-24
- html中div获取焦点,去掉input div等获取焦点时候的边框 2021-11-30
- input 输入框获得/失去焦点时隐藏/显示文字(jquery版) 2021-12-19
- input,文本框获取焦点时边框样式 2021-11-30
- Excel获得焦点变色 2021-11-23
- input文本框获取焦点和失去焦点判断 2021-12-09