简单实现IE9及以下对placeholder的兼容性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单实现IE9及以下对placeholder的兼容性</title> <style> * {margin: 0;padding: 0;font-family: "Microsoft YaHei";font-size: 14px;} .input-box {margin: 10px;position: relative;width: 100px;height: 30px;line-height: 30px;} .input1 {width: 100%;height: 100%;padding-left: 5px;} .input2 {width: 100%;height: 100%;padding-left: 10px;} .placeholder {position: absolute;top: 0;z-index: 10;color: #888;} </style> </head> <body> <div class="input-box"> <input class="input1" type="text" placeholder="请输入标题"> </div> <div class="input-box"> <input class="input2" type="text" placeholder="请输入文章"> </div> <script src="jquery-1.11.3.js"></script> <script> $(function(){ // 兼容IE9下的placeholder function placeholderSupport() { return 'placeholder' in document.createElement('input'); } if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder $("[placeholder]").each(function(){ var _this = $(this); var left = _this.css("padding-left"); _this.parent().append('<span class="placeholder" data-type="placeholder" style="left: ' + left + '">' + _this.attr("placeholder") + '</span>'); if(_this.val() != ""){ _this.parent().find("span.placeholder").hide(); } else{ _this.parent().find("span.placeholder").show(); } }).on("focus", function(){ $(this).parent().find("span.placeholder").hide(); }).on("blur", function(){ var _this = $(this); if(_this.val() != ""){ _this.parent().find("span.placeholder").hide(); } else{ _this.parent().find("span.placeholder").show(); } }); // 点击表示placeholder的标签相当于触发input $("span.placeholder").on("click", function(){ $(this).hide(); $(this).siblings("[placeholder]").trigger("click"); $(this).siblings("[placeholder]").trigger("focus"); }); } }) </script> </body> </html>