HTML5中的Placeholder属性
新HTML5有好多好玩儿的玩意儿，我特喜欢那个能预先设置提示文字的文本框placeholder属性。这个功能就是说先给你一段提醒，等到你真的想开始敲字时，这段提示就会自动消失。以前搞这个得用JavaScript，现在直接用HTML5自带的placeholder属性就能搞定，简单方便，效果也挺好的！
HTML代码中的Placeholder属性
在文本框上添个小提示，嗖嗖搞定！就像往input标签加个placeholder属性似的，再也不用搞那些麻烦的JavaScript代码了。这下给用户提供贴心提示，轻松多了。
浏览器兼容性检查
别慌，告诉我你现在用啥浏览器？咱要知道，那个叫placeholder的东东可是HTML5里面的新功能，老版IE（像6和8这类的）可不懂这个，那就得靠JavaScript库来帮忙。我这儿正好有俩特别好用的推荐给你，就是MooTools和Dojo！
用CSS美化Placeholder
那个小白条里面的提示字可别小看，只要调整下CSS就能改变字体、颜色和样式了，还有可能加入动画效果！这样你的网页立刻活灵活现的，肯定会吸引更多眼球哟~
JavaScript Code复制内容到剪贴板
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}
火狐与谷歌浏览器下的CSS应用
虽然火狐和谷歌浏览器中的占位符文字略有不同，但不用担心！它们的操作都特简单。我们爱怎么调整就怎么调整
细节决定成败
JavaScript Code复制内容到剪贴板
/* mootools ftw! */
var firstNameBox = $('first_name'),
message = firstNameBox.get('placeholder');
firstNameBox.addEvents({
focus: function() {
if(firstNameBox.value == message) { searchBox.value = ''; }
},
blur: function() {
if(firstNameBox.value == '') { searchBox.value = message; }
}
});
别小看那小小的提示框，只要提示字选得好，网站也会变得不一样！懂了这些小技巧，你做出来的互动网站肯定很受欢迎喔。
IE10对Placeholder支持
科技越来越先进了？现在很多浏览器都可以自动添加 placeholder 属性哇。像 IE10 就是一个好例子，它能完美支持这项功能，真是大家的福音
总结与展望
咱们今天来聊聊HTML5里面一个小窍门儿—— placeholder 属性。这个小小的东西虽然看似平常，但其实用处大着！它能让你在输入框内显示提示文字，让用户用得更舒服，上网也更开心！我相信，随着科技不断发展，placeholder 属性也会变得越来越强大，到时候我们上网体验肯定会更好哒！
读完这篇，你就对HTML5的placeholder属性了如指掌！别忘了用它来提高网页质量！说到网页设计，还有什么实用技巧？快说来听听~
CSS Code复制内容到剪贴板
/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
/* inpidual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
/* inpidual: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
评论0