让IE8-浏览器支持html5 placeholder属性,支持password类型
placeholder是html5的属性,可以在文本框内显示提示内容,而这个提示内容确不会提交到服务器。IE8-不支持html5,所以需要使用js来实现placeholder效果。
本示例居于jquery框架,让IE8-浏览器支持html5 placeholder属性,支持password类型源代码如下
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script> <style>input{height:20px;width:100px}</style> <form><input type="text" placeholder="用户名" name="un"/><input type="password" placeholder="密码" name="pwd"/><input type="submit" /></form> <script> window.onload=function(){ /* 让IE8-浏览器支持html5 placeholder属性,支持类型为password */ if (!('placeholder' in document.createElement('input'))) {//判断浏览器是否支持placeholder属性,不支持则扩展 //让IE7-支持display inline-block css,因为password类型需要用dom来模拟 document.write('<style>div.placeholder{display:inline;zoom:1;position:relative;}input.placeholder{color:#999}div.placeholder div.note{font-size:12px;color:#999;position:absolute;left:3px;top:3px;}</style>'); $.fn.placeholder = function (config) { return this.each(function () { var me = $(this), pl = me.attr('placeholder'); if (this.type == 'password') {//为密码域不能通过val来设置值显示内容,会显示星号,只能用dom来模拟 var wrap = me.wrap('<div class="placeholder" style="width:' + me.outerWidth(true) + 'px;height:' + me.outerHeight(true) + 'px"></div>').parent(); var note = wrap.append('<div class="note" style="line-height:' + me.outerHeight(true) + 'px">' + pl + '</div>') .click(function () { wrap.find('div.note').hide(); me.focus(); }).find('div.note'); me.blur(function () { if (me.val() == '') note.show(); }); } else { //非密码域使用val设置placeholder值 me.focus(function () { me.removeClass('placeholder'); if (this.value == pl) this.value = ''; }).blur(function () { if (this.value == '') me.val(pl).addClass('placeholder'); }).trigger('blur').closest('form').submit(function () { if (me.val() == pl) me.val(''); }); } }); } //扩展方法clearPlaceholderValue:提交数据前执行一下,清空和placeholder值一样的控件内容。防止提交placeholder的值。 //用于输入控件不在表单中或者使用其他代码进行提交的,不会触发form的submit事件,记得一定要执行此方法 //是否要执行这个方法,可以判断是否存在此扩展 //DMEO:if($.fn.clearPlaceholderValue)$('input[placeholder],textarea[placeholder]').clearPlaceholderValue() $.fn.clearPlaceholderValue = function () { return this.each(function () { if (this.value == this.getAttribute('placeholder')) this.value = ''; }); } $(function () { $('input[placeholder],textarea[placeholder]').placeholder(); }); } } </script>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:让IE8-浏览器支持html5 placeholder属性,支持password类型