/**
*
* jquery.placeholder-1.0.0
*
* Licensed under the GPL terms
* To use it on other terms please contact us
*
* Copyright(c) 2012-2014 Luke [ luxianai@163.com ]
*
*/
/**
*
* 使用方法
* 最简单的调用方式
* $("#").Placeholder();
* $(".").Placeholder();
* $("input[type='值']").Placeholder();
*
*
*一般调用形式
* $("").Placeholder({
* placeholder: 'data-val',
* defaultClass: "class",
* tips: '测试文字'
* });
*/
(function ($) {
$.fn.Placeholder = function (param) {
var defaults = {
placeholder: 'data-placeholder', // <input type="text" data-placeholder="文字说嘛" />
defaultClass: 'default_placeholder', // 样式名称
tips: '', // 默认提示文本，如果为空则或者data-placeholder的值，反之
focusClass: "jp_focus"
}
var $this = $(this);
var options = $.extend(defaults, param);
var placeholder = options.tips == "" ? $this.attr(options.placeholder) : options.tips;
if (placeholder != "" && $this.val() == "") {
// 追加文字样式
$this.addClass(options.defaultClass);
// 赋值
$this.val(placeholder);
} else {
$this.addClass(options.focusClass);
}
// 添加焦点事件
$this.focus(function () {
if ($(this).val() == placeholder) {
$(this).val("");
// 移除样式
$this.removeClass(options.defaultClass);
$this.addClass(options.focusClass);
}
// 添加移开焦点事件
}).blur(function () {
if ($(this).val() == "" || $(this).val() == placeholder) {
// 赋值
$(this).val(placeholder);
// 追加文字样式
$this.addClass(options.defaultClass);
$this.removeClass(options.focusClass);
}
});
}
})(jQuery);
.default_placeholder{color: #C8C8C8;}
.jp_focus {color:black;}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.8.2.min.js"></script>
<link href="js/jquery.placeholder/jquery.placeholder.css" rel="stylesheet" />
<script src="js/jquery.placeholder/jquery.placeholder-1.0.0.js"></script>
<script type="text/javascript">
$(function () {
// 默认
$("#txt1").Placeholder();
// 自定义提示信息
$("#txt2").Placeholder({ tips: "随便输入点东西吧！" });
// 自定义data-placeholder
$("#txt3").Placeholder({ placeholder: "data-p" });
// 初始化了value
$("#txt4").Placeholder();
});
</script>
</head>
<body>
<input id="txt1" data-placeholder="请输入一个文本" type="text" />
<input id="txt2" type="text" />
<input id="txt3" data-p="自定义data-placeholder" type="text" />
<input id="txt4" data-placeholder="请输入一个文本" value="(初始化了value)" type="text" />
</body>
</html>