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
    })
    }
    }

【小程序】---- input获得焦点时placeholder重影BUG的更多相关文章

  1. 防抖-小程序-input输入频繁时搜索出bug

    html: <input type="text" class="input_search" placeholder="搜索周边店铺"  ...

  2. 小程序input输入框获取焦点时,文字会出现闪动

    最近在开发小程序时,发现一个有趣的现象.input里面设置了placeholder,随后当输入框获取焦点时,文字会出现一瞬间的抖动,随后正常. 猜想可能是设置的font-family不同引起的抖动,但 ...

  3. 小程序input组件获得焦点时placeholder内容有重影

    这个问题是小程序input组件的bug,目前的解决办法可以,在input标签上加一个其他标签,显示placeholder内容,获得焦点时消失,失去焦点时候再让其显示 <view class='i ...

  4. 微信小程序input组件抖动及textarea组件光标错位解决方案

    问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...

  5. [微信小程序]在应用地图时,如何设置满屏(高度)

    微信小程序在做地图功能时 用常规的办法height:100%:来设置高度来占满屏幕是不行的 它不会生效 应该改用单位vh 例如 height:100vh 这样就可以是地图占满整个屏幕高度

  6. 微信小程序 input组件type属性3个值的作用

    input组件是小程序的内容输入框组件,通常是这样来使用的: <input type="text" placeholder="输入点内容吧" /> ...

  7. 【组件】微信小程序input搜索框的实现

    开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节.实现效果如下: 官方参考链接:https://developers.weixin ...

  8. 微信小程序 input 的 type属性 text、number、idcard、digit 区别

    微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...

  9. 微信小程序 input 组件

    输入框:该组件是原生组件,使用的时候要注意相关的设置 属性: value:类型 字符串 输入框的初始内容 type:类型 字符串 input类型 属性值:text 文本输入键盘 number 数字输入 ...

随机推荐

  1. [LC] 59. Spiral Matrix II

    Given a positive integer n, generate a square matrix filled with elements from 1 to n2 in spiral ord ...

  2. C#阶段小结

    一.数据类型: (一)内建类型: 整型(int ,short, long ,byte ,uint ,ushort, ulong ,sbyte): 浮点型(double float decimal): ...

  3. 概率/期望DP初步——BZOJ1415 聪聪和可可

    期望相关: 数学期望,可以简单理解的加权平均数.设有一系列的值$x_i$,每个值被取到的概率为$p_i$,则期望$E=\sum\limits_{i=1}^n p_i x_i$. 期望具有线性性:$$E ...

  4. python学习笔记(2)数据类型-字符串

    字符串是 Python 中最常用的数据类型.我们可以使用引号( ' 或 " )来创建字符串. 创建字符串很简单,只要为变量分配一个值即可.例如: var1 = 'Hello World!' ...

  5. volatile与Synchronized

    摘自: https://blog.csdn.net/zxh476771756/article/details/78685581 一.JVM内存模型: JVM将内存组织为主内存和工作内存两个部分. 主内 ...

  6. 用磁盘工具刻录MACOSX系统启动盘方法

    些系统盘用Toast 刻录后无法引导,建议使用磁盘工具刻录系统盘 老手可能早知道这了,仅供新手参考 在应用程序-->实用工具里找到磁盘工具,打开. 将DMG文件拖放到磁盘工具窗口,双击DMG文件 ...

  7. sql语句查询成绩表各科前三名

    --语法形式: ROW_NUMBER() OVER(PARTITION BY COL1 ORDER BY COL2) --解释: 根据COL1分组,在分组内部根据 COL2排序,而此函数计算的值就表示 ...

  8. python的列表list和集合set操作

    以下是一些python的list和set的基本操作 1.list的一些操作 list = [1, 2, 3] list.append(5) print(list) list.extend([7, 8] ...

  9. django应用的测试

    本文章默认用户使用win10系统,并且已经安装pycharm.git.django2.2.5及配套第三方库(python3.6.0及以上版本,且为anaconda环境) 前言 其实在上一期django ...

  10. 5.7之sql_model

    问题发生背景 今天在部署项目的时候发现,测试后台接口,直接报 500,仔细一看原来是操作数据库的时候报错了,在本地测试的时候是没遇到类似的问题,数据库的版本是一样的,后面查找资料,说是 MySQL 5 ...