[JQuery] 處理 IE 不支援 HTML5 的 placeholder 屬性

2012-08-29

[JQuery] 處理 IE 不支援 HTML5 的 placeholder 屬性 (一次搞定)

/* 2012.8.29 Maple 撰寫 */

原本想說 IE9 有支援 HTML5 了，沒想到這麼好用的 placeholder 屬性居然不支援＝＝

PS. placeholder 屬性是設定輸入框中顯示"提示文字"

Google 查到 http://blog.wu-boy.com/2011/11/html5-placeholder-attribute-on-ie/ 的解決方案

原本要照著用，結果這用法使用上不太方便 ( 我想要一次解決全部的 placeholder )

考量可能的使用環境，改成以下程式

本來是想要寫半套自己可以用就好了

最後想想，既然都 po 出來哩，那還是把它寫完整點好了 Orz

紅字的部份是我無法解決的地方，如果有什麼一勞永逸的方式歡迎指教 ><

在HTML中載入 js 檔案


<!--[if IE]>
    <script src = "fixIePlaceholder.js"></script>
<![endif]-->

另外設定CSS，不採用直接修改顏色，因為可能會異動到原本自定義的color

.placeholderColor { color : #A9A9A9 !important; }

檔案 fixIePlaceholder.js 的內容


/*
處理 IE 不支援 HTML5 的 placeholder 屬性
2012.8.29 Maple 撰寫
http://www.dotblogs.com.tw/maplenote/archive/2012/08/29/html5-placeholder-on-ie.aspx
適用 jQuery 1.6 以上的版本，低於 1.6  需把 prop() 改為 attr()
*/

function fix_ie_placeholder()
{
	$("[placeholder]").each(function(){
		var el = $(this);
		var placeholder = el.attr("placeholder");
		if(el.prop("type")=="password")//處理密碼欄位
		{
			el.focus(function ()
			{
				$(this).prop("type","password");
				if($(this).val() == $(this).attr("placeholder"))
				{
					$(this).val('').removeClass("placeholderColor");
				}
			}).blur(function ()
			{
				if($(this).val()=='')
				{
					$(this).prop("type","text");
					$(this).val($(this).attr("placeholder")).addClass("placeholderColor");
				}
			});
			//不採用 el.blur(); 可能會改到預設 focus() 的輸入框
			//值相同時，也要修改文字顏色
			if(el.val()==''||el.val()==el.attr("placeholder"))
			{
				el.prop("type","text");
				el.val($(this).attr("placeholder")).addClass("placeholderColor");
			}
		}
		else //處理非密碼欄位
		{
			el.focus(function ()
			{
				if($(this).val() == $(this).attr("placeholder"))
				{
					$(this).val('').removeClass("placeholderColor");
				}
			}).blur(function ()
			{
				if($(this).val()=='')
				{
					$(this).val($(this).attr("placeholder")).addClass("placeholderColor");
				}
			});
			//不採用 el.blur(); 可能會改到預設 focus() 的輸入框
			//值相同時，也要修改文字顏色
			if(el.val()==''||el.val()==el.attr("placeholder"))
			{
				el.val($(this).attr("placeholder")).addClass("placeholderColor");
			}
		}
	});
}

//送出表單時呼叫，欄位值若等於 placeholder 的值就清空
function clearPlaceholderValue()
{
	$("[placeholder]").each(function(){
		if($(this).val()==$(this).attr("placeholder"))
		{
			$(this).val("");
		}
	});
}

$(function(){
	fix_ie_placeholder();
	//監聽 submit 事件，此動作會在 onsubmit 後，尚未轉頁前執行
	if(typeof window.addEventListener != "undefined") {
		window.addEventListener("submit",clearPlaceholderValue);
	} else {
		$("form").each(function(){
			this.attachEvent("onsubmit",clearPlaceholderValue);
		});
	}
});

最後要注意，送出表單前若有 必填欄位檢核 的 onsubmit 判斷，需要增加判斷欄位值不可為提示文字

因為 Event Listener 監聽動作會在 onsubmit 的 js 處理後才執行

所以在執行 onsubmit 判斷時，欄位值有可能是提示文字，而非空值

跟監聽事件的動作很不熟，找了一下參考資料 + 測試老半天，終於能跑了

以下是有關事件監聽的參考資料

http://tw.newtonstudio.com/?p=59

http://blog.othree.net/log/2007/02/06/third-argument-of-addeventlistener/

回首頁