很久之前寫了這個插件，基於jQuery實現的，主要用於IE下實現placeholder效果，可同時支援文字和密碼輸入框。
placeholder是HTML5新增的屬性，當input設定了該屬性後，該值的內容將作為灰色提示顯示在文字方塊中，當文字方塊獲得焦點時，提示文字消失。
下載網址：http://xiazai.jb51.net/201501/other/placeholderfriend.rar
實作程式碼如下：
var placeholderfriend = {
focus: function(s) {
s = $(s).hide().prev().show().focus();
var idValue = s.attr("id");
if (idValue) {
s.attr("id", idValue.replace("placeholderfriend", ""));
}
var clsValue = s.attr("class");
if (clsValue) {
s.attr("class", clsValue.replace("placeholderfriend", ""));
}
}
}
//判斷是否支援placeholder
function isPlaceholer() {
var input = document.createElement('input');
return "placeholder" in input;
}
//不支援的程式碼
if (!isPlaceholer()) {
$(function() {
var form = $(this);
//遍歷所有文字框，並加入placeholder模擬事件
var elements = form.find("input[type='text'][placeholder]");
elements.each(function() {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (pValue) {
if (sValue == '') {
s.val(pValue);
}
}
});
elements.focus(function() {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (sValue && pValue) {
if (sValue == pValue) {
s.val('');
}
}
});
elements.blur(function() {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (!sValue) {
s.val(pValue);
}
});
//遍歷所有密碼框，並加入placeholder模擬事件
var elementsPass = form.find("input[type='password'][placeholder]");
elementsPass.each(function(i) {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (pValue) {
if (sValue == '') {
//DOM不支援type的修改，且需要複製密碼框屬性，產生新的DOM
var html = this.outerHTML || "";
html = html.replace(/s*type=(['"])?password1/gi, " type=text placeholderfriend")
.replace(/s*(?:value|on[a-z] |name)(=(['"])?S*1)?/gi, " ")
.replace(/s*placeholderfriend/, " placeholderfriend value='" pValue
"' " "onfocus='placeholderfriendfocus(this);' ");
var idValue = s.attr("id");
if (idValue) {
s.attr("id", idValue "placeholderfriend");
}
var clsValue = s.attr("class");
if (clsValue) {
s.attr("class", clsValue "placeholderfriend");
}
s.hide();
s.after(html);
}
}
});
elementsPass.blur(function() {
var s = $(this);
var sValue = s.val();
if (sValue == '') {
var idValue = s.attr("id");
if (idValue) {
s.attr("id", idValue "placeholderfriend");
}
var clsValue = s.attr("class");
if (clsValue) {
s.attr("class", clsValue "placeholderfriend");
}
s.hide().next().show();
}
});
});
}
window.placeholderfriendfocus = placeholderfriend.focus;
})(jQuery);
使用很簡單，範例如下：
