/** * * 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>