HTML5 的 placeholder 屬性相信大家都熟悉不過, 但我們常常會很懊惱究竟該不該用他, 事關此屬性直至 IE9 都還未被支援 (相信新出爐的 IE10 應該可以用了吧!! ), 這就意味著所有使用 IE 瀏覽器的用戶都將看不到該提示, 不禁讓我們卻步。
網上有不少人都提供解決方案讓 IE 也能顯示該提示, 而最為常用的方法便是利用 jQuery 將所有 input 的值設定為 placeholder 的內容, 可是這個方法的缺點是提交表單時如果輸入框沒有輸入內容, placeholder 的提示便會被當成內容送出, 這又使得我們不得不多做一重功夫去驗証收到的內容是用戶輸入的內容還是 placeholder 的內容
因此我便在想了一個比較好的方法, 利用 position absolute 的屬性在輸入框上浮著一個提示文字, 當 focus 時便隱藏該提示, 這樣便可做到和 placeholder 一樣的效果又不用設定內容到 input 中了
設計表單時使用這樣的設計:
<label><input type="text" placeholder="email" /></label>我們則利用 jquery 去將一個 span 加入到 input 後面, 完成後應該會是這樣
<label><input type="text" placeholder="email" /><span>email</span></label>CSS 這樣設定:
label { position: relative; }
label span { position: absolute; left: 0; top: 0; }如果你的 input 或 label 設定了一些 padding, 需要在 label span 中設定 top 和 left 來較正顯示位置
最後在網頁加入以下這段 jQuery 便可
$(document).ready(function() {
if($.browser.msie && $.browser.version<=9) {
$("[placeholder]").each(function() {
$placeholder = $(this).attr('placeholder');
$(this).after(''+$placeholder+'');
$(this).focus(function() { $(this).next('span').hide(); });
$(this).blur(function() {
if($(this).val().length>0) {
$(this).next('span').hide();
} else {
$(this).next('span').show();
}
});
});
}
});