ie瀏覽器下placeholder屬性失效的解決辦法
阿新 • • 發佈:2018-11-20
1,在頁面設計中,表單的設計需要提示性的詞語來引導使用者使用,最常見的的就是使用標籤placeholder屬性,只可惜這個HTML 5屬性在低版本的IE下會失效,那該怎麼辦呢?
2,placeholder 屬性提供可描述輸入欄位預期值的提示資訊。該提示會在輸入欄位為空時顯示,並會在欄位獲得焦點時消失。
3,只需要使用以下js程式碼,就可以解決placeholder屬性在IE中失效了。
<script type="text/javascript"> ;(function($){ $.fn.placeholder = function(options){ var opts = $.extend({}, $.fn.placeholder.defaults, options); var isIE = document.all ? true : false; return this.each(function(){ var _this = this, placeholderValue =_this.getAttribute("placeholder"); //快取預設的placeholder值 if(isIE){ _this.setAttribute("value",placeholderValue); _this.onfocus = function(){ $.trim(_this.value) == placeholderValue ? _this.value = "" : ''; }; _this.onblur = function(){ $.trim(_this.value) == "" ? _this.value = placeholderValue : ''; }; } }); }; })(jQuery); </script>
4,設定需要支援此功能的元素,注意:此程式碼基於jquery庫,所以使用前請先引入jquery庫檔案。
<script type="text/javascript">
$("input").placeholder();
</script>