/*!
* Author:UEDfuns.com
* Date:2013-3-7
* FileName:jquery.placeholder.js HTML5 placeholder plugin jQuery1.4+
*/
(function($, undefined) {
$.fn.placeholder = function(options) {
var defaults = {
labelMode: false,
labelStyle: {},
labelAlpha: false,
labelAcross: false
};
var params = $.extend({}, defaults, options || {});
//方法
var funLabelAlpha = function(elementEditable, elementCreateLabel) {
if (elementEditable.val() === "") {
elementCreateLabel.css("opacity", 0.4).html(elementEditable.data("placeholder"));
} else {
elementCreateLabel.html("");
}
};
$(this).each(function() {
var element = $(this), isPlaceholder = "placeholder" in document.createElement("input"), placeholder = (function(ele) {
// 为了向下兼容jQuery 1.4
if (document.querySelector) {
return $(ele).attr("placeholder");
} else {
// IE6, 7
var ret;
ret = ele.getAttributeNode("placeholder");
// Return undefined if nodeValue is empty string
return ret && ret.nodeValue !== "" ? ret.nodeValue : undefined;
}
})(this);
// 三种情况打酱油
// ① 没有placeholder属性值
// ② value模拟,同时是支持placeholder属性的浏览器
// ③ label模拟,但是无需跨浏览器兼容,同时是支持placeholder属性的浏览器
if (!placeholder || (!params.labelMode && isPlaceholder) || (params.labelMode && !params.labelAcross && isPlaceholder)) { return; }
// 存储,因为有时会清除placeholder属性
element.data("placeholder", placeholder);
// label模拟
if (params.labelMode) {
var idElement = element.attr("id"), elementLabel = null;
if (!idElement) {
idElement = "placeholder" + Math.random();
element.attr("id", idElement);
}
// 状态初始化
elementLabel = $('<label for="'+ idElement +'"></label>').css($.extend({
lineHeight: "1.3",
position: "absolute",
color: "graytext",
cursor: "text",
margin: element.css("margin"),
padding: element.css("padding")
}, params.labelStyle)).insertBefore(element);
// 事件绑定
if (params.labelAlpha) {
// 如果是为空focus透明度改变交互
element.bind({
"focus": function() {
funLabelAlpha($(this), elementLabel);
},
"input": function() {
funLabelAlpha($(this), elementLabel);
},
"blur": function() {
if (this.value === "") {
elementLabel.css("opacity", 1).html(placeholder);
}
}
});
//IE6~8不支持oninput事件,需要另行绑定
if (!window.screenX) {
element.bind("keyup", function() {
funLabelAlpha($(this), elementLabel);
});
element.get(0).onpaste = function() {
setTimeout(function() {
funLabelAlpha(element, elementLabel);
}, 30);
}
}
// 右键事件
elementLabel.get(0).oncontextmenu = function() {
element.trigger("focus");
return false;
}
} else {
//如果是单纯的value交互
element.bind({
"focus": function() {
elementLabel.html("");
},
"blur": function() {
if ($(this).val() === "") {
elementLabel.html(placeholder);
}
}
});
}
// 内容初始化
if (params.labelAcross) {
element.removeAttr("placeholder");
}
if (element.val() === "") {
elementLabel.html(placeholder);
}
} else {
// value模拟
element.bind({
"focus": function() {
if ($(this).val() === placeholder) {
$(this).val("");
}
$(this).css("color", "");
},
"blur": function() {
if ($(this).val() === "") {
$(this).val(placeholder).css("color", "graytext");
}
}
});
// 初始化
if (element.val() === "") {
element.val(placeholder).css("color", "graytext");
}
}
});
return $(this);
};
})(jQuery);
$(function(){
//placeholder效果模拟
$("[placeholder]").each(function(){
var height = $(this).height();
$(this).placeholder({
labelMode: true,
labelStyle: {height: height + "px",lineHeight: height + "px",verticalAlign:"middle",color: "#A0A0A0", paddingLeft:"10px"}
});
});
});
* Author:UEDfuns.com
* Date:2013-3-7
* FileName:jquery.placeholder.js HTML5 placeholder plugin jQuery1.4+
*/
(function($, undefined) {
$.fn.placeholder = function(options) {
var defaults = {
labelMode: false,
labelStyle: {},
labelAlpha: false,
labelAcross: false
};
var params = $.extend({}, defaults, options || {});
//方法
var funLabelAlpha = function(elementEditable, elementCreateLabel) {
if (elementEditable.val() === "") {
elementCreateLabel.css("opacity", 0.4).html(elementEditable.data("placeholder"));
} else {
elementCreateLabel.html("");
}
};
$(this).each(function() {
var element = $(this), isPlaceholder = "placeholder" in document.createElement("input"), placeholder = (function(ele) {
// 为了向下兼容jQuery 1.4
if (document.querySelector) {
return $(ele).attr("placeholder");
} else {
// IE6, 7
var ret;
ret = ele.getAttributeNode("placeholder");
// Return undefined if nodeValue is empty string
return ret && ret.nodeValue !== "" ? ret.nodeValue : undefined;
}
})(this);
// 三种情况打酱油
// ① 没有placeholder属性值
// ② value模拟,同时是支持placeholder属性的浏览器
// ③ label模拟,但是无需跨浏览器兼容,同时是支持placeholder属性的浏览器
if (!placeholder || (!params.labelMode && isPlaceholder) || (params.labelMode && !params.labelAcross && isPlaceholder)) { return; }
// 存储,因为有时会清除placeholder属性
element.data("placeholder", placeholder);
// label模拟
if (params.labelMode) {
var idElement = element.attr("id"), elementLabel = null;
if (!idElement) {
idElement = "placeholder" + Math.random();
element.attr("id", idElement);
}
// 状态初始化
elementLabel = $('<label for="'+ idElement +'"></label>').css($.extend({
lineHeight: "1.3",
position: "absolute",
color: "graytext",
cursor: "text",
margin: element.css("margin"),
padding: element.css("padding")
}, params.labelStyle)).insertBefore(element);
// 事件绑定
if (params.labelAlpha) {
// 如果是为空focus透明度改变交互
element.bind({
"focus": function() {
funLabelAlpha($(this), elementLabel);
},
"input": function() {
funLabelAlpha($(this), elementLabel);
},
"blur": function() {
if (this.value === "") {
elementLabel.css("opacity", 1).html(placeholder);
}
}
});
//IE6~8不支持oninput事件,需要另行绑定
if (!window.screenX) {
element.bind("keyup", function() {
funLabelAlpha($(this), elementLabel);
});
element.get(0).onpaste = function() {
setTimeout(function() {
funLabelAlpha(element, elementLabel);
}, 30);
}
}
// 右键事件
elementLabel.get(0).oncontextmenu = function() {
element.trigger("focus");
return false;
}
} else {
//如果是单纯的value交互
element.bind({
"focus": function() {
elementLabel.html("");
},
"blur": function() {
if ($(this).val() === "") {
elementLabel.html(placeholder);
}
}
});
}
// 内容初始化
if (params.labelAcross) {
element.removeAttr("placeholder");
}
if (element.val() === "") {
elementLabel.html(placeholder);
}
} else {
// value模拟
element.bind({
"focus": function() {
if ($(this).val() === placeholder) {
$(this).val("");
}
$(this).css("color", "");
},
"blur": function() {
if ($(this).val() === "") {
$(this).val(placeholder).css("color", "graytext");
}
}
});
// 初始化
if (element.val() === "") {
element.val(placeholder).css("color", "graytext");
}
}
});
return $(this);
};
})(jQuery);
$(function(){
//placeholder效果模拟
$("[placeholder]").each(function(){
var height = $(this).height();
$(this).placeholder({
labelMode: true,
labelStyle: {height: height + "px",lineHeight: height + "px",verticalAlign:"middle",color: "#A0A0A0", paddingLeft:"10px"}
});
});
});