【小程序】---- 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 数字输入 ...
随机推荐
- 吴裕雄 python 神经网络——TensorFlow 卷积神经网络手写数字图片识别
import os import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data INPUT_N ...
- 树状数组 hdu2689 hdu2838
题意:给定一个正整数n,和一个1-n的一个排列,每个数可以和旁边的两个数的任意一个交换,每交换一次总次数就要加一,问将这个排列转换成一个递增的排列需要多少次交换? 题意可以转换成求这个排列的逆序对数. ...
- 学会使用数据讲故事——Excel研究网络研讨会
编者按:在数据密集型研究的新时代,Excel将成为研究者讲故事的强大工具.在即将举行的Excel研究网络研讨会中,我们将与你探讨如何用新的方式来寻找.查询.分析数据并实现数据可视化.Office 36 ...
- Two Sum(Medium)
1.遍历一次nums,利用map记录已经遍历过的nums[i],并记录其index :i+1 2.每次求出b=target-nums[i],检测b是否在map中,如果在,则已经得到答案,否则,把num ...
- MIAME|Highwire press
生物信息学 GEO可存储基因芯片数据,支持MIAME.MIAME是minimum information about a microarry experiment.这之中存储研究原始数据+标准化之后的 ...
- percent|Cane|confess|ballot|conceal
You got 20 percent of the answers right - that means one in every five.你20%的答案是对的,也就是说每5个中有1个是对的. N- ...
- sql语句查询成绩表各科前三名
--语法形式: ROW_NUMBER() OVER(PARTITION BY COL1 ORDER BY COL2) --解释: 根据COL1分组,在分组内部根据 COL2排序,而此函数计算的值就表示 ...
- 转载——Python Selenium 常用方法总结
selenium Python 总结一些工作中可能会经常使用到的API. 1.获取当前页面的Url 方法:current_url 实例:driver.current_url 2.获取元素坐标 方法:l ...
- Linux上的软件ClamAV
ClamAV是使用广泛且基于GPL License的开源代码的典型杀毒软件,它支持各种平台,如:windows.linux.Unix等操作系统,并被广泛应用于其他应用程序,如:邮件客户端服务器.HTT ...
- textarea 是否换行的问题解决
需求:判断当前textarea是否已经换行(这个换行有2种方式:1.不断输入文字直到超过指定宽度后自动换行:2.按了回车以后进行换行) 单纯的解决第二种换行很简单.网上提供了很多常规的解决方案. De ...