千丝海阁

由于酸橘子官网旧的登录界面样式实在是不堪入目，自从前端工程师离职后，虽然又来了个前端工程师，无奈人手不够，新来的那位一来就被tiandi叫去重写整个手机版的模板了，所以这两天，tiandi稍微空了点的时候，开始自己重写了酸橘子官网的登录界面。

新登录界面：

旧登录界面：

新界面采取的是类似淘宝的做法，简洁，将头部和脚步通用档等无用信息都移除掉，只留下有用的登录框信息。由于登录框里取消了原先的label，例如“账号”“密码”等，所以需要在inputtext框内设置默认值，可以让用户清晰的知道这个框框是用来输入什么东西的，当用户点击时，框框的默认文字清空，当用户移除焦点时，如果用户没有输入任何文字，则再次显示提示文字。这个功能当然可以直接用js的focus来改写value的值实现并且是各浏览器通用，不过这样也太Low了点，这里介绍比较高端的做法。

Chrome和Firefox以及IE10+版本，已经支持placeholder属性，通过以下代码可以方便实现效果，简简单单只要加一个属性就OK。

<input name="username" id="username" type="text" placeholder="用户名/邮箱/手机" />

对于IE9以下各版本，tiandi的本意是这些反人类的东西不再鸟它了，不过这里还是说一下兼容方法，借助JS来实现。

var funPlaceholder = function(element) {
var placeholder = '';
    if (element && !("placeholder" in document.createElement("input")) && (placeholder = element.getAttribute("placeholder"))) {
        element.onfocus = function() {
            if (this.value === placeholder) {
                this.value = "";
            }
            this.style.color = '';
        };
        element.onblur = function() {
            if (this.value === "") {
                this.value = placeholder;
                this.style.color = 'graytext';    
            }
        };
        
        //样式初始化
        if (element.value === "") {
            element.value = placeholder;
            element.style.color = 'graytext';    
        }
    }
};
window.onload = function() {
	funPlaceholder(document.getElementById("username"));
}

轻松搞定！