【小程序】---- 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 数字输入 ...
随机推荐
- [LC] 125. Valid Palindrome
Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...
- linux一些基本操作-防火墙操作
防火墙操作 一.service方式 查看防火墙状态: [root@centos6 ~]# service iptables status iptables:未运行防火墙. 开启防火墙: [root@c ...
- react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...
- Mac系统常用软件
1.往移动硬盘中拷贝东西.创建文件夹: Mounty 2.解压缩软件(rar): the unarchiver 3.类似Xshell软件: FinalShell(国产) 输入以下命令: curl -o ...
- 吴裕雄--天生自然HTML学习笔记:HTML 统一资源定位器(Uniform Resource Locators)
URL 是一个网页地址. URL可以由字母组成,如"runoob.com",或互联网协议(IP)地址: 192.68.20.50.大多数人进入网站使用网站域名来访问,因为 名字比数 ...
- Windows Server 2008 配置 PHP 环境
在配置PHP环境之前要先配置好IIS. 传送门-> Win2008 Server下配置安装IIS 如果IIS是以默认的配置安装,则还需要安装CGI. 在这里勾选CGI,然后安装. 创建一个网站 ...
- SQL逻辑查询处理顺序特别提醒
我们知道在SQL语句中,第一个被处理的子句式FROM,而不是第一出现的SELECT.这就是SQL不同于其他编程语言的最明显特征之一,以下先看一下SQL查询处理的步骤序号: (8) SELECT (9) ...
- VMware虚拟机克隆CentOS6.5后修改网卡
在学习zk伪分布式集群对的时候,第一次注意到克隆虚拟机后修改eth的ip地址,发现ip不是自己修改的ip,进而在询问下发现,当我们第一次登陆查看我们克隆的虚拟机ip时:我们看到的ip不是et ...
- Oracle中的列转行实现字段拼接用例
文章目录 Oracle中的列转行实现字段拼接 场景 在SQL使用过程中经常有这种需求:将某列字段拼接成in('XX','XX','XX','XX','XX','XX' ...)做为查询条件. 实现 s ...
- VMware虚拟机各版本密钥
VMware Workstation Pro 激活许可证 UY758-0RXEQ-M81WP-8ZM7Z-Y3HDA VF750-4MX5Q-488DQ-9WZE9-ZY2D6 UU54R-FVD91 ...