标签:
IE8不支持html5 placeholder的解决方法。
/** * jQuery EnPlaceholder plug * version 1.0 2014.07.01戈志刚 * by Frans.Lee <dmon@foxmail.com> http://www.ifrans.cn */ (function ($) { $.fn.extend({ "iePlaceholder":function (options) { options = $.extend({ placeholderColor:‘#999‘, isUseSpan:true, onInput:true }, options); $(this).each(function () { var _this = this; var supportPlaceholder = ‘placeholder‘ in document.createElement(‘input‘); if (!supportPlaceholder) { var defaultValue = $(_this).attr(‘placeholder‘); var defaultColor = $(_this).css(‘color‘); if (options.isUseSpan == false) { $(_this).focus(function () { var pattern = new RegExp("^" + defaultValue + "$|^$"); pattern.test($(_this).val()) && $(_this).val(‘‘).css(‘color‘, defaultColor); }).blur(function () { if ($(_this).val() == defaultValue) { $(_this).css(‘color‘, defaultColor); } else if ($(_this).val().length == 0) { $(_this).val(defaultValue).css(‘color‘, options.placeholderColor) } }).trigger(‘blur‘); } else { var $imitate = $(‘<span class="wrap-placeholder" style="position:absolute; display:inline-block; overflow:hidden; color:‘+options.placeholderColor+‘; width:‘+$(_this).width()+‘px; height:‘+$(_this).outerHeight()+‘px;">‘ + (defaultValue==undefined?"":defaultValue) + ‘</span>‘); //hg-add $(_this).focus(function(){ $imitate.hide(); }).blur(function () { /^$/.test($(_this).val()) && $imitate.show(); }); $imitate.css({ ‘margin-left‘:$(_this).css(‘margin-left‘), ‘margin-top‘:$(_this).css(‘margin-top‘), ‘text-align‘:‘left‘, ‘font-size‘:$(_this).css(‘font-size‘), ‘font-family‘:$(_this).css(‘font-family‘), ‘font-weight‘:$(_this).css(‘font-weight‘), ‘padding-left‘:parseInt($(_this).css(‘padding-left‘)) + 2 + ‘px‘, ‘line-height‘:_this.nodeName.toLowerCase() == ‘textarea‘ ? $(_this).css(‘line-weight‘) : $(_this).outerHeight() + ‘px‘, ‘padding-top‘:_this.nodeName.toLowerCase() == ‘textarea‘ ? parseInt($(_this).css(‘padding-top‘)) + 2 : 0 }); $(_this).before($imitate.click(function () { $(_this).trigger(‘focus‘); })); $(_this).val().length != 0 && $imitate.hide(); if (options.onInput) { var inputChangeEvent = typeof(_this.oninput) == ‘object‘ ? ‘input‘ : ‘propertychange‘; $(_this).bind(inputChangeEvent, function () { $imitate[0].style.display = $(_this).val().length != 0 ? ‘none‘ : ‘inline-block‘; }); } else { $(_this).focus(function () { $imitate.hide(); }).blur(function () { /^$/.test($(_this).val()) && $imitate.show(); }); } } } }); return this; } }); })(jQuery); /*调用方式: textarea需要田间onInput=false属性*/ $(‘input[placeholder], textarea[placeholder]‘).each(function(){$(this).is(‘input‘)?$(this).iePlaceholder():$(this).iePlaceholder({onInput: false});}); $(document).ready(function(){ if (typeof (Worker) == "undefined"){ $(‘input[placeholder], textarea[placeholder]‘).each(function(){$(this).is(‘input‘)?$(this).iePlaceholder():$(this).iePlaceholder({onInput: false});}); } });
测试html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--便于页面更好的在移动平台上展示。 <meta name="viewport" content="initial-scale=1.0,user-scalable=no"> --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="Content-Language" content="utf-8" /> <meta name="author" content="Gezhigang" /> <title>placeholder</title> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript" src="placeholder.js"></script> </head> <body> <div style="margin-left: 30%;margin-top: 10%;"> <form> <table> <tr> <td height="30px">用户名</td> <td><input type="text" placeholder="这里输入帐号。。。"/></td> </tr> <tr > <td height="30px">密码</td> <td><input type="text" placeholder="这里输入密码。。。"/></td> </tr> <tr> <td> </td> <td><input type="submit" value="会员登录" /></td> </tr> </table> </form> </div> </body> </html>
标签:
原文地址:http://www.cnblogs.com/rwxwsblog/p/5193772.html