placeholder的使⽤
1.定义
placeholder 属性提供可描述输⼊字段预期值的提⽰信息
该提⽰会在输⼊字段为空时显⽰,并会在字段获得焦点时消失。
注释:placeholder 属性适⽤于以下的 <input> 类型:text, search, url, telephone, email 以及 password。
2.⽤法
<input type="password" name="user_search" placeholder="Search W3School" />
3.缩进
::-webkit-input-placeholder {
text-indent: 4px;
}
:-ms-input-placeholder {
text-indent: 4px;
}
::-moz-placeholder {
text-indent: 4px;
opacity: 1!important;
}
input:focus::-webkit-input-placeholder {
color: #999;
border-color:#999;
}
4.低版本兼容
思路:
4.1 判断浏览器是否⽀持该元素
return 'placeholder' ateElement('input');
4.2 遍历⽂档所有带 placeholder 属性的 input
$(':input[placeholder]').each(function (index, element) {})
4.3  判断是否是 password 类型
LowerCase() === 'password';记住我
4.4  针对每个匹配元素绑定事件 focus、blur、
总结:不同浏览器上展现效果不尽相同,模仿达到产品需求即可。
发现⼀个好玩的现象:
如果你把⾃⼰的表单放在⼀个⽩⾊背景下或者透明背景下,input设置为⽩⾊背景⾊和颜⾊,你会发现看起来聚焦不了了...