【小程序】---- 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 数字输入 ...
随机推荐
- deeplearning.ai 神经网络和深度学习 week3 浅层神经网络
1. 第i层网络 Z[i] = W[i]A[i-1] + B[i],A[i] = f[i](Z[i]). 其中, W[i]形状是n[i]*n[i-1],n[i]是第i层神经元的数量: A[i-1]是第 ...
- MOOC(7)- case依赖、读取json配置文件进行多个接口请求-解决用例间依赖问题(17)
最最重要,处理case依赖.字段依赖 # -*- coding: utf-8 -*- # @Time : 2020/2/13 21:14 # @File : data_depend_17.py # @ ...
- OpenCV 腐蚀与膨胀(Eroding and Dilating)
#include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...
- 设置Fiddler来抓取Android接口数据
1.下载安装fiddler,安装包可自行百度.安装完成打开fiddler 2.将Fiddler设置远程访问PC 选择Fiddler->Tools->Fiddler Option 3.选择C ...
- 20180105关于课题所用的labview的改进随笔
在原有的工程上1.写入60个不同的数字~顶层,看测量次数是1.2.3.4.5.6.7.8.9的时候文件记到几次的数,一次的话,从接受命令到全部写到文件最短需要等多久.写入固定的数,通过startfla ...
- 初级string
标准库string类型 string对象初始化 string s1; string s2(s1); string s3("value"); string s4(n,'c'); st ...
- vue-cli 项目结构介绍
感谢:https://www.jianshu.com/p/7006a663fb9f 总体框架 一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关 ...
- 用nexus搭建maven2内部服务器
由于项目组需要,要搭建内部的Maven仓库,借鉴项目组内部及外部同事的经验选用nexus来搭建内部仓库.下面描述一下具体的步骤. 一.安装配置过程 1.下载nexus,地址http://www.s ...
- MyBatis if test 传入一个数字进行比较报错 There is no getter for property named 'userState' in 'class java.lang.Integer'
在写MyBatis映射文件中,我要传入一个 int 类型的参数,在映射文件中用 'test' 中进行比较,我花了很长时间百度,发现都是不靠谱的方法,有把数字在比较时转成字符串用 equals 比较的. ...
- tomcat——nginx负载均衡
Tomcat一般应用在这种小型系统中应用非常广泛,是开发调试jsp的首先应用.Tomcat和其他web软甲一样具有解析HTML语言的功能,但是处理效率远不及Apacge和Nginx,所以Tomcat一 ...