HTML5placeholder属性详解
HTML5⾥新引⼊很多有趣的新特征；有些体现在HTML⾥，有些是JavaScript API，全部⾮常的有⽤。其中我最喜欢的⼀个特征就是⽂本框(INPUT)⾥的placeholder属性。placeholder属性能够让你在⽂本框⾥显⽰提⽰信息，⼀旦你在⽂本框⾥输⼊了什么信息，提⽰信息就会隐藏。你以前可能⽆数次看到这种效果，但那些⼤部分是⽤JavaScript⾥实现的，⽽现在，HTML5提供了原⽣⽀持，⽽且效果更好！
HTML代码
<input type="text" name="first_name" placeholder="你的姓名..." />
你也看见了，需要做的只是在⽂本框的声明标签上加⼊placeholder属性。完全不需要JavaScript来创造这种效果。
检查浏览器是否⽀持Placeholder属性
因为placeholder是⼀种新属性，很有必要检查⼀下你的浏览器是否⽀持它，⽐如IE6、IE8肯定是不⽀持的：
JavaScript Code复制内容到剪贴板
1. function hasPlaceholderSupport() {
2. var input = ateElement('input');
3. return ('placeholder' in input);
4. }
5.
如果⽤户的浏览器不⽀持placeholder特征，你需要借助MooTools, Dojo, 或其它JavaScript⼯具来实现它：
JavaScript Code复制内容到剪贴板
1. /* mootools ftw! */
2. var firstNameBox = $('first_name'),
3. message = ('placeholder');
4. firstNameBox.addEvents({
5. focus: function() {
6. if(firstNameBox.value == message) { searchBox.value = ''; }
7. },
8. blur: function() {
9. if(firstNameBox.value == '') { searchBox.value = message; }
10. }
11. });
12.
⽤CSS美化placeholder
html代码属性大全前⼀篇⽂章⾥我写了。在进⼀步研究时我发现了另外⼀个有趣的CSS功能：CSS美化INPUT placeholder效果。下⾯让我来⽤简单的CSS代码美化⽂本框⾥的placeholder⽂字。
CSS代码
⽕狐浏览器⾥的⽤法和⾕歌浏览器⾥不太⼀样。它们的名称都很好理解：
CSS Code复制内容到剪贴板
1. /* all */
2. ::-webkit-input-placeholder { color:#f00; }
3. ::-moz-placeholder { color:#f00; } /* firefox 19+ */
4. :-ms-input-placeholder { color:#f00; } /* ie */
5. input:-moz-placeholder { color:#f00; }
6.
7. /* individual: webkit */
8. #field2::-webkit-input-placeholder { color:#00f; }
9. #field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
10. #field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
11.
12. /* individual: mozilla */
13. #field2::-moz-placeholder { color:#00f; }
14. #field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
15. #field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
16.
你可以控制placeholder⽂字的字体、颜⾊和风格。你甚⾄可以将⽂本框的placeholder以动画⽅式显⽰。美化你的⽂本框都是些看起来很⼩的事情，但对于⼀些交互式的⽹站来说，成功的关键就在于细节。现在IE10⾥也只⽀持placeholder了，相信越来越多的⼈会使⽤这种原⽣的placeholder效果。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论