placeholder 兼容 ie6/7/8/9

来源：互联网发布：ubuntu snmpwalk 安装编辑：程序博客网时间：2024/06/07 09:03

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="用户名" onmouseover="javascript:this.focus();"></li><li><input type="password" placeholder="密码" ></li><li><input type="button" value="提交"></li></ul></body></html>

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

阅读全文

0 0