placeholder 兼容 ie6/7/8/9

最新推荐文章于 2024-04-03 22:29:48 发布

BossNoNo

最新推荐文章于 2024-04-03 22:29:48 发布

阅读量825

点赞数

分类专栏： js 文章标签： placehoder

本文链接：https://blog.csdn.net/weicy1510/article/details/73204357

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

placeholder 属性是 HTML5 中的新属性。

placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。
该提示会在用户输入值之前显示在输入字段中。
注意：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 placeholder 属性。
注意：Internet Explorer 9 及之前的版本不支持 <input> 标签的 placeholder 属性。所以需要做兼容。

说明：以下代码是在别人的基础上修改了一点点，然后加了注释，方便新手理解的。

那位仁兄的原文：https://www.oschina.net/code/snippet_206691_26471#44160

/*
 * jQuery placeholder, fix for IE6,7,8,9
 * 
 */
var JPlaceHolder = {
    //检测 浏览器是否支持placehoder
    _check : function(){
        return 'placeholder' in document.createElement('input');
    },
    //初始化
    init : function(){
        if(!this._check()){
            this.fix();
        }
    },
    //修复
    fix : function(){
        // 使用jquery 获取页面所有设置了placehoder的input
        jQuery(':input[placeholder]').each(function(index, element) {
            // 获取placeholder的文字
            var self = $(this), txt = self.attr('placeholder');
            // 在input外包裹一个相对定位用的div
            self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
            // 获取input的位置信息
            var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left'), fontsize = self.css('font-size');
            //alert(fontsize);
            // 在input的父元素里面加入span
            var holder = $('<span></span>').text(txt).css({'position':'absolute', 'left':pos.left+'px', 'top':pos.top+'px', 'height':h+'px', 'line-height':h+'px', 'padding-left':paddingleft+'px', 'font-size':fontsize, 'color':'#aaa'}).appendTo(self.parent());
            // input获得焦点时 隐藏holder，失去焦点时如果input里没有内容显示holder
            self.focusin(function(e) {
                holder.hide();
            }).focusout(function(e) {
                if(!self.val()){
                    holder.show();
                }
            });
            // holder被点击时隐藏，input获得焦点
            holder.click(function(e) {
                holder.hide();
                self.focus();
            });
        });
    }
};
//执行
jQuery(function(){
    JPlaceHolder.init();    
});

使用：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>placehoder for ie6/7/8/9</title>
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.JPlaceholder.js"></script>
</head>
<body>
<ul>
	<!--当鼠标划到上面的时候,获得输入焦点  -->
	<li><input type="text"  placeholder="用户名" οnmοuseοver="javascript:this.focus();"></li>
	<li><input type="password" placeholder="密码" ></li>
	<li><input type="button" value="提交"></li>
</ul>
	
</body>
</html>

使用起来方便，只要引入jquery 和jquery.JPlaceholder.js （即第一个代码段的文件）就可以了。

BossNoNo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
placeholder 兼容 ie6/7/8/9

placeholder 属性是 HTML5 中的新属性。placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。该提示会在用户输入值之前显示在输入字段中。注意：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。Internet Explorer
复制链接

扫一扫