103 lines
3.3 KiB
JavaScript
103 lines
3.3 KiB
JavaScript
|
/*
|
|||
|
|
* @copyright QiaoQiaoShiDai Internet Technology(Shanghai)Co.,Ltd
|
|||
|
|
* @license https://www.oaooa.com/licenses/
|
|||
|
|
*
|
|||
|
|
* @link https://www.oaooa.com
|
|||
|
|
* @author zyx(zyx@oaooa.com)
|
|||
|
|
|
|||
|
|
//依赖：BROWSER
|
|||
|
|
//头部引入js：
|
|||
|
|
<!--[if lt IE 9]>
|
|||
|
|
<script src="static/js/jquery.placeholder.js" type="text/javascript"></script>
|
|||
|
|
<![endif]-->
|
|||
|
|
|
|||
|
|
//调用示例
|
|||
|
|
jQuery(document).ready(function(e) {
|
|||
|
|
jQuery(':input[placeholder]').each(function(){
|
|||
|
|
jQuery(this).placeholder();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
*/
|
|||
|
|
(function($)
|
|||
|
|
{
|
|||
|
|
$.fn.placeholder = function (options) {
|
|||
|
|
var defaults = {
|
|||
|
|
pColor: "#666",
|
|||
|
|
pActive: "#999",
|
|||
|
|
pFont: "14px",
|
|||
|
|
activeBorder: "#080",
|
|||
|
|
posL: 16,
|
|||
|
|
zIndex: "999"
|
|||
|
|
},
|
|||
|
|
opts = $.extend(defaults, options);
|
|||
|
|
return this.each(function () {
|
|||
|
|
if ("placeholder" in document.createElement("input")) return;
|
|||
|
|
$(this).parent().css("position", "relative");
|
|||
|
|
var isIE = BROWSER.ie, version = BROWSER.ie;
|
|||
|
|
//不支持placeholder的浏览器
|
|||
|
|
var $this = $(this),
|
|||
|
|
msg = $this.attr("placeholder"),
|
|||
|
|
iH = $this.outerHeight(true),
|
|||
|
|
iW = $this.outerWidth(true),
|
|||
|
|
iX = $this.position().left,
|
|||
|
|
iY = $this.position().top,
|
|||
|
|
oInput = $("<span>", {
|
|||
|
|
"class": "wrapper-placeholder",
|
|||
|
|
"text": msg,
|
|||
|
|
"css": {
|
|||
|
|
"position": "absolute",
|
|||
|
|
"left": iX + "px",
|
|||
|
|
"top": iY + "px",
|
|||
|
|
"width": iW + "px",
|
|||
|
|
"padding-left": opts.posL + "px",
|
|||
|
|
"height": iH + "px",
|
|||
|
|
"line-height": iH + "px",
|
|||
|
|
"color": opts.pColor,
|
|||
|
|
"font-size": opts.pFont,
|
|||
|
|
"z-index": opts.zIndex,
|
|||
|
|
"cursor": "text"
|
|||
|
|
}
|
|||
|
|
}).insertBefore($this);
|
|||
|
|
//初始状态就有内容
|
|||
|
|
var value = $this.val();
|
|||
|
|
if (value.length > 0) {
|
|||
|
|
oInput.hide();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
$this.on("focus", function () {
|
|||
|
|
var value = $(this).val();
|
|||
|
|
if (value.length > 0) {
|
|||
|
|
oInput.hide();
|
|||
|
|
}
|
|||
|
|
oInput.css("color", opts.pActive);
|
|||
|
|
if(isIE && version <= 9){
|
|||
|
|
var myEvent = "propertychange";
|
|||
|
|
}else{
|
|||
|
|
var myEvent = "input";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(this).on(myEvent, function () {
|
|||
|
|
var value = $(this).val();
|
|||
|
|
if (value.length == 0) {
|
|||
|
|
oInput.show();
|
|||
|
|
} else {
|
|||
|
|
oInput.hide();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}).on("blur", function () {
|
|||
|
|
var value = $(this).val();
|
|||
|
|
if (value.length == 0) {
|
|||
|
|
oInput.css("color", opts.pColor).show();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
oInput.on("click", function () {
|
|||
|
|
$this.trigger("focus");
|
|||
|
|
$(this).css("color", opts.pActive)
|
|||
|
|
});
|
|||
|
|
$this.filter(":focus").trigger("focus");
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})(jQuery);
|