【小程序】---- input获得焦点时placeholder重影BUG
- 问题
小程序的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
})
}
}
【小程序】---- input获得焦点时placeholder重影BUG的更多相关文章
- 防抖-小程序-input输入频繁时搜索出bug
html: <input type="text" class="input_search" placeholder="搜索周边店铺" ...
- 小程序input输入框获取焦点时,文字会出现闪动
最近在开发小程序时,发现一个有趣的现象.input里面设置了placeholder,随后当输入框获取焦点时,文字会出现一瞬间的抖动,随后正常. 猜想可能是设置的font-family不同引起的抖动,但 ...
- 小程序input组件获得焦点时placeholder内容有重影
这个问题是小程序input组件的bug,目前的解决办法可以,在input标签上加一个其他标签,显示placeholder内容,获得焦点时消失,失去焦点时候再让其显示 <view class='i ...
- 微信小程序input组件抖动及textarea组件光标错位解决方案
问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...
- [微信小程序]在应用地图时,如何设置满屏(高度)
微信小程序在做地图功能时 用常规的办法height:100%:来设置高度来占满屏幕是不行的 它不会生效 应该改用单位vh 例如 height:100vh 这样就可以是地图占满整个屏幕高度
- 微信小程序 input组件type属性3个值的作用
input组件是小程序的内容输入框组件,通常是这样来使用的: <input type="text" placeholder="输入点内容吧" /> ...
- 【组件】微信小程序input搜索框的实现
开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节.实现效果如下: 官方参考链接:https://developers.weixin ...
- 微信小程序 input 的 type属性 text、number、idcard、digit 区别
微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...
- 微信小程序 input 组件
输入框:该组件是原生组件,使用的时候要注意相关的设置 属性: value:类型 字符串 输入框的初始内容 type:类型 字符串 input类型 属性值:text 文本输入键盘 number 数字输入 ...
随机推荐
- POJ2352 Stars [树状数组模板]
题意:输入一n颗星星的x,y坐标,给定判断level的标准,即某颗星星左下边(不高于它,不超过他,相当于以他为基准的第三象限)星星的数目为level, 输出level从0到n的星星个数. //poj2 ...
- Tarjan相关
先码住: 板子:http://www.cnblogs.com/luckycode/p/5255656.html 求割点/割边:http://www.cnblogs.com/c1299401227/p/ ...
- 吴裕雄--天生自然python学习笔记:Python3 JSON 数据解析
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. Python3 中可以使用 json 模块来对 JSON 数据进 ...
- Adam项目展示微软研究院人工智能领域新突破
编者按:在美国时间7月14日举行的2014年微软教育峰会上,Adam项目面对牵上台的3只小狗,一一准确地报出了它们的品种.Adam项目代表了微软研究院在机器学习和人工智能领域的前沿进展.它可不仅仅认得 ...
- HDU-1164-Eddy's research I(分解质因数)
由于这道题目数据范围小,所以属于水题.可以采取暴力的做法来解决. 代码如下: #include"bits/stdc++.h" using namespace std; ; ]; v ...
- Jenkins 2 如何使用 PowerShell 以及自定 build fail (指定 exit code)
Jenkins 除了用來做為 CI(持續性整合) 工具外,也可以與其他 plugin 配合達成其他目的(e.g.IIS restart.檔案壓縮備份-),今天就來看看可以怎麼與 PowerShell ...
- unittest(2)-加载用例的3种方式-输出测试报告
# 导入测试类执行测试用例 import unittest from day_20191202.class_unittest import TestMathMethod, TestMulti # fr ...
- POJ 2226 Muddy Fields 二分图(难点在于建图)
题意:给定一个矩阵和它的N行M列,其中有一些地方有水,现在有一些长度任意,宽为1的木板,要求在板不跨越草,用一些木板盖住这些有水的地方,问至少需要几块板子? 思路:首先想到如果没有不准跨越草的条件则跟 ...
- UMD: 通用模块规范
既然CommonJs和AMD风格一样流行,似乎缺少一个统一的规范.所以人们产生了这样的需求,希望有支持两种风格的“通用”模式,于是通用模块规范(UMD)诞生了.
- 码海拾遗:strcpy()、strncpy()和strcpy_s()区别
1.strcpy() 原型:char *strcpy(char *dst,const char *src) 功能:将以src为首地址的字符串复制到以dst为首地址的字符串,包括'\0'结束符,返回ds ...