HTML5 的 Placeholder属性

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

<input id="t1" type="text" placeholder="请输入文字" />

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

function hasPlaceholderSupport() {
  return 'placeholder' in document.createElement('input');
}

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

1 /* all */
2 ::-webkit-input-placeholder { color:#f00; }
3 input:-moz-placeholder { color:#f00; }
4  
5 /* individual: webkit */
6 .field::-webkit-input-placeholder { font-style:italic;  color:#999; }
7  
8 /* individual: mozilla */
9 .field::-moz-placeholder { font-style:italic;  color:#999; }

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

 1 var PlaceHolder = {
 2     _support: (function() {
 3         return 'placeholder' in document.createElement('input');
 4     })(),
 5  
 6     //提示文字的样式，需要在页面中其他位置定义
 7     className: 'textClass',
 8  
 9     init: function() {
10         if (!PlaceHolder._support) {
11             //未对textarea处理，需要的自己加上
12             var inputs = document.getElementsByTagName('input');
13             PlaceHolder.create(inputs);
14         }
15     },
16  
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     },
40  
41     _setValue: function(input) {
42         input.value = input.attributes.placeholder.nodeValue;
43         input.className = PlaceHolder.className;
44     }
45 };
46  
47 //页面初始化时对所有input做初始化
48 //PlaceHolder.init();
49 //或者单独设置某个元素
50 //PlaceHolder.create(document.getElementById('t1'));
View Code

 

原文地址：http://www.oschina.net/question/5189_22929?sort=default&p=1#answers

posted @ 2013-10-24 18:01  特雷西one  阅读(486)  评论(0)  编辑  收藏  举报