占位符的作用与使用
<input id="username" name="username" placeholder="请输入用户名" type="text">
占位符（placeholder）就是HTML5新推出的一个功能，主要用途就是给那些需要填写的地方提供提醒，让大家更明白这个位置要填什么。它就像一个灰色的小提示，让你知道这个地方该怎么填，提升了用户体验。用起来很方便，只要在input标签里加上placeholder属性，再写上提示文字就行！
::-webkit-input-placeholder { /* Chrome/Safari/Opera */
color: green;}::-moz-placeholder { /* Firefox 19+ */
color: green;}:-ms-input-placeholder { /* IE 10+ 注意这里只有一个冒号 */
color: green;}
你知道吗，开发小技巧里，占位符其实挺有用的，特别是遇到格式有点难搞或者特定信息要填的地方，比如邮箱，电话号码这些。用对了占位符，就可以帮助大家少犯错，提高数据质量！
::-webkit-input-placeholder,::-moz-placeholder {
color: green;}
当然，占位符也能帮你让网页变得更酷！通过调整输入框占位符内容和样式，你的页面就能显得漂亮又专业了，给别人留下好印象。
:-moz-placeholder { /* Firefox 4 - 18 */
color: green;}
::-moz-placeholder {
color: green;
opacity: 1;}
不同浏览器对占位符样式的支持
p:first-child {
font-size: 16px;}
现在用什么浏览器上网页，对占位符样式的兼容性都不太一样。像IE这种浏览器要用“:-ms-input-placeholder”这个伪类选择器才能设置占位符的样式。不过要小心，如果你已经给文本输入框设了别的样式，那就可能把占位符的样式盖过去！
p.first-child {
font-size: 16px;}
p:beforeparagraph
大家知道吗？Chrome和Firefox浏览器里，当你在文本输入框打字的时候，那个提示文字placeholder就会自己跑掉！但如果你删掉之前打的字，它又会悄悄地回来了。而IE浏览器，它的做法就是只要文本输入框被选上（也就是获得焦点），placeholder就会消失不见。
通过CSS优化占位符
input:-ms-input-placeholder { /* 0, 0, 1, 1 */
color: green;}#username { /* 0, 1, 0, 0 */
color: blue;}
想让chrome或firefox这些浏览器一点击输入框就能把占位符隐藏起来吗？利用”:focus”这个伪类选择器就能搞定！这样你就能更轻松地输入~
input::-webkit-input-placeholder { /* 0, 0, 0, 2 */
color: green;}#username { /* 0, 1, 0, 0 */
color: blue;}
还有就是，我们还能用JavaScript调整占位符的样式！简单来说，就是先设置好几个不同的样式，然后根据具体情况切换下文本输入框的class属性就能搞定。这样做的话，页面看着会很整齐，更重要的是，你还能随心所欲地打造自己喜欢的样子！
兼容性处理与Polyfill技术
在网页设计时，我们要小心一件事，那就是各种浏览器对于placeholder属性的支持程度不一样。为了让网页在各大浏览器上都能顺畅运行，我们得做好浏览器的兼容工作。其中有个办法挺实用的，就是用特性检测来看看浏览器支不支持placeholder属性，然后再决定要不要用Polyfill技术来补救。
:focus::-webkit-input-placeholder {
color: transparent;}
Polyfill技术就是帮我们在各种浏览器间做到功能统一，比如有些浏览器不支持原始的placeholder属性的话，它就会模拟出相似的效果，这样不仅让用户使用起来更舒服，还能确保网页功能照常运转。
$('input').attr('placeholder', 'Please enter your name');
如何编写Polyfill
编写Polyfill时要尽量跟浏览器自带功能一样，同时要考虑到各种情况会遇到哪些问题。比如说，如果我们想像IE那样控制placeholder是否显示，就得加上监听事件的代码，当用户点击或离开文本输入框时，看value是不是空，然后再决定placeholder该不该显示。
window.getComputedStyle(document.getElementById('username'),
'::-moz-placeholder').getPropertyValue('color'); // "rgb(0, 255, 0)"
要说，填写完表单可别忘了把那些还留着占位符状态的文字输入框的value属性设成空，预防把不完整的信息传到服务器上。还有就是，浏览器关闭或者刷新的时候也别忘了清除这些有占位符状态的文字输入框，免得它们记住了你之前输入的内容，搞得乱七八糟的。
判断浏览器支持情况
.style-1::-moz-placeholder {
color: green;}.style-2::-moz-placeholder {
color: red;}
要用Polyfill搞定浏览器兼容问题，设计的哥们儿得用点儿手段。比如借助现成的工具，像Modernizr这样的玩意儿就能帮忙；也能自己动手写个函数来查查页面上的元素有没有placeholder属性，这样就心里有底了。
总的说来，HTML5加了个新东西叫占位符属性，让我们在填表时更方便快捷！用它来设置提示文字和样式，再加上CSS和JavaScript这些技术，开发出来的表单页面就很完美~
$('input').addClass('style-2').removeClass('style-1');
评论0