首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

小编者 HTML5 的 placeholder属性

2013-11-25 
小编辑 HTML5 的 placeholder属性HTML5 的 PLACEHOLDER 属性\HTML5对Web Form做了许多增强,比如input新增

小编辑 HTML5 的 placeholder属性
HTML5 的 PLACEHOLDER 属性\


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

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 <length; i++) {            input = inputs[i];            if (!PlaceHolder._support && input.attributes && input.attributes.placeholder) {                PlaceHolder._setValue(input);                input.addEventListener('focus', function(e) {                    if (this.value === this.attributes.placeholder.nodeValue) {                        this.value = '';                        this.className = '';                    }                }, false);                input.addEventListener('blur', function(e) {                    if (this.value === '') {                        PlaceHolder._setValue(this);                    }                }, false);            }        }    },     _setValue: function(input) {        input.value = input.attributes.placeholder.nodeValue;        input.className = PlaceHolder.className;    }}; //页面初始化时对所有input做初始化//PlaceHolder.init();//或者单独设置某个元素//PlaceHolder.create(document.getElementById('t1'));







设计师应该拥有的 50 个很有用的 CSS 代码
http://www.oschina.net/question/5189_112117

热点排行