1. 程式人生 > >ie瀏覽器下placeholder屬性失效的解決辦法

ie瀏覽器下placeholder屬性失效的解決辦法

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>