最近发现一些网站会给input加一个与以往不同的效果 问了下度娘才知道是html5的新属性，这个效果交互性还不错 估计以后使用的网站会越来越多。

传统的input提示效果：

placeholder属性提示效果:

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

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

/* all */
::-webkit-input-placeholder { color:#f00; }
input:-moz-placeholder { color:#f00; }
/* individual: 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; }
/* individual: 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; }

可以通过以下js兼容其他不支持placeholder的浏览器：

 var PlaceHolder = {
    _support: (function() {
    return 'placeholder' in document.createElement('input');
    })(),

    //提示文字的样式，需要在页面中其他位置定义
    className: 'abc',

    init: function() {
    if (!PlaceHolder._support) {
    //未对textarea处理，需要的自己加上
    var inputs = document.getElementsByTagName('input');
    PlaceHolder.create(inputs);
    }
    },

    create: function(inputs) {
    var input;
    if (!inputs.length) {
    inputs = [inputs];
    }
    for (var i = 0, length = inputs.length; i