首页 » HTML/CSS » inputtext框内灰色默认值placeholder的各浏览器实现方式

inputtext框内灰色默认值placeholder的各浏览器实现方式

12323 4

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

新登录界面:
placeholder

旧登录界面:
old

新界面采取的是类似淘宝的做法,简洁,将头部和脚步通用档等无用信息都移除掉,只留下有用的登录框信息。由于登录框里取消了原先的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"));
}

轻松搞定!

文章评分2次,平均分3.0

本文原始地址:https://www.tiandiyoyo.com/2015/01/placeholder_on_diff_browsers/
本站所有文章,除了特别注明外,均为本站原创,转载请注明出处来自www.tiandiyoyo.com

您可能还会对以下文章感兴趣:

    没有相关的文章

评论前先开启评论开关:


4 Comments

  1. 对啊,话说博主是老板啊,BOSS关注下我呗,看能给个几毛钱的不,我也干点活。

  2. 哦,有这个新属性,确实很方便啊。

  3. 呵呵 现在都已经是主管了?

  4. 嗯,看着挺不错的,支持一下!

载入分页评论...