解決IE9及以下版本對placeholder的相容性問題
阿新 • • 發佈：2018-12-16
解決IE9及以下版本對placeholder的相容性問題
placeholder屬性可以對input輸入框輸入內容的提醒或者指引
但在IE9及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;} .placeholder {position: absolute;top: 8px;padding-left: 74px;z-index: 10;color: #888;} </style> </head> <body> <div> <input id="eqpCod" name="裝置號" 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>