• 【小程序】---- input获得焦点时placeholder重影BUG


    1. 问题
      小程序的input组件有个自身的bug,即当输入框获取焦点时placeholder内容会出现重影现象。

    2. 解决思路
      原理:将placeholder内容单独写在另外的标签里,控制其显示隐藏。
      操作:将代表placeholder内容的标签定位到input框上,在input输入事件中控制标签隐藏,在input失焦事件中若输入框内容为空时控制标签显示。
    3. 代码实现
      // 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
            })
          }
        }
  • 相关阅读:
    php CI框架基础知识
    1206 多表单提交,强类型
    1205 Mvc的Razor语法
    1204 Mvc
    1117 邮件验证
    1115 模板页
    1113 Ajax
    1110 Jquary动画
    1108 Jquary
    1107 Linq高级查询
  • 原文地址:https://www.cnblogs.com/pinkpinkc/p/12492518.html
Copyright © 2020-2023  润新知