IT博客汇 | 关于低版本浏览器实现类似 html5 placeholder 功能

关于低版本浏览器实现类似 html5 placeholder 功能

admin发表于 2015-04-24 10:47:46

html5 placeholder 介绍：
placeholder属性是HTML5新添加的属性，当input或者textarea设置了该属性后，该值的内容将作为灰色提示显示在文本框中，当文本框获得焦点时，提示文字消失，placeholder可作为输入框的提示文案。

由于低版本浏览器不兼容此属性，原来使用jquery.placeholder插件来解决问题，插件地址如下：
https://github.com/mathiasbynens/jquery-placeholder

但昨天发现在ie下密码框存在问题，可能和业务逻辑也有点关系。这个插件对password密码框的处理是，重新生成一个类型为text的文本框，做为默认提示文字，在有输入时显示类型为password的框。

密码输入框内部显示汉字问题 http://bbs.csdn.net/topics/390403024
“当把的type属性改为passowrd时。默认的“密码”成了“•• ”。有人会想到用js来动态改变input的type属性，这种方法在某些浏览器去可行的如：火狐。但遇到万恶的IE去拿它没法。在IE中，input的type属性为只读。”

没有整好，只能考虑换一种方案了。使用label来实现。

html代码如下：

js代码如下：

    $(function(){
 
        $('.login_item').on('keypress','input',function(){
            $(this).prev().hide();
        });
        $('.login_item').on('blur','input',function(){
            if ($(this).val() == ''){
                $(this).prev().show();
            }
        });
    })

css代码如下：

.login_item{
    position: relative;
	height: 38px;
	margin-bottom: 15px;
}
.input_tips{
    position: absolute;
    top: 2px;
    left: 2px;
    padding: 4px 0 4px 10px;
    line-height:28px;
    color: #aaa;
}

Feed enhanced by Better Feed from Ozh