【博文转载】HTML5的PLACEHOLDER属性

西风瘦马 发布于 二月 17, 2011

HTML5对Web Form做了许多增强，比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现：

PLAIN TEXT

HTML:

1. <input id=”t1″ type=”text” placeholder=”请输入文字” />

 

传统方式实现的灰字提示：

placeholder实现的灰字提示：

(如果看不到左边文本框中的文字，说明你的浏览器不支持placeholder)

由于placeholder是个新增属性，目前只有少数浏览器支持，如何检测浏览器是否支持它呢？(更多HTML5/CSS3特性检测可以访问)

PLAIN TEXT

JAVASCRIPT:

1. function hasPlaceholderSupport() {
2. return ’placeholder’ in document.createElement(‘input’);
3. }

 

现在支持的浏览器有：Firefox4.0+、Chrome4.0+、Safari4.0+，Opera 11、IE9 RC2尚不支持。

默认提示文字是灰色的，可以通过CSS来改变文字样式：

PLAIN TEXT

CSS:

1. /* all */
2. ::-webkit-input-placeholder { color:#f00; }
3. input:-moz-placeholder { color:#f00; }
5. /* individual: webkit */
6. #field2::-webkit-input-placeholder { color:#00f; }
7. #field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
8. #field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
10. /* individual: mozilla */
11. #field2:-moz-placeholder { color:#00f; }
12. #field3:-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
13. #field4:-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

 

兼容其他不支持placeholder的浏览器：

PLAIN TEXT

JAVASCRIPT:

1. var PlaceHolder = {
2. _support: (function() {
3. return ’placeholder’ in document.createElement(‘input’);
4. })(),
6. //提示文字的样式，需要在页面中其他位置定义
7. className: ’abc’,
9. init: function() {
10. if (!PlaceHolder._support) {
11. //未对textarea处理，需要的自己加上
12. var inputs = document.getElementsByTagName(‘input’);
13. PlaceHolder.create(inputs);
14. }
15. },
17. create: function(inputs) {
18. var input;
19. if (!inputs.length) {
20. inputs = [inputs];
21. }
22. for (var i = 0, length = inputs.length; i <length; i++) {
23. input = inputs[i];
24. if (!PlaceHolder._support && input.attributes && input.attributes.placeholder) {
25. PlaceHolder._setValue(input);
26. input.addEventListener(‘focus’, function(e) {
27. if (this.value === this.attributes.placeholder.nodeValue) {
28. this.value = ”;
29. this.className = ”;
30. }
31. }, false);
32. input.addEventListener(‘blur’, function(e) {
33. if (this.value === ”) {
34. PlaceHolder._setValue(this);
35. }
36. }, false);
37. }
38. }
39. },
41. _setValue: function(input) {
42. input.value = input.attributes.placeholder.nodeValue;
43. input.className = PlaceHolder.className;
44. }
45. };
47. //页面初始化时对所有input做初始化
48. //PlaceHolder.init();
49. //或者单独设置某个元素
50. //PlaceHolder.create(document.getElementById(‘t1′));

 

相关网页：
http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute

 

转载自： http://blog.tugai.net/2011/02/17/html5-placeholder/