|
前言：在很多时候，我们需要文本框中显示默认值，获取焦点时，文字框中就会清空给的值，当失去焦点时，如果没有值，继续显示默认的文字，如果有输入值，就显示输入的值。现在项目中需要用到这个地方的功能比较多，于是想到了HTML5中的placeholder属性，但是总所周知，IE是咋们程序员心中的硬伤，不得不放弃。又不想在网上找这类似的，索性就自己写了一个，现在分享出来，供大家参考！ |
下面是插件的主要代码：
(function ($) { $.fn.Placeholder = function (param) { var defaults = { defaultval: 'data-defaultval', // <input type="text" data-defaultval="文字说嘛" /> defaultClass: 'default_text_auto', // 样式名称 tipstext: '', // 默认提示文本，如果为空则或者defaultval的值，反之 focusClass: "block" } var $this = $(this); var options = $.extend(defaults, param); var defaultval = options.tipstext == "" ? $this.attr(options.defaultval) : options.tipstext; if (defaultval != "" && $this.val() == "") { // 追加文字样式 $this.addClass(options.defaultClass); // 赋值 $this.val(defaultval); // 添加焦点事件 $this.focus(function () { if ($(this).val() == defaultval) { $(this).val(""); // 移除样式 $this.removeClass(options.defaultClass); $this.addClass(options.focusClass); } // 添加移开焦点事件 }).blur(function () { if ($(this).val() == "" || $(this).val() == defaultval) { // 赋值 $(this).val(defaultval); // 追加文字样式 $this.addClass(options.defaultClass); $this.removeClass(options.focusClass); } }); } else { $this.addClass(options.focusClass); } } })(jQuery);
这里是相关的的样式
.default_placeholder{color: #C8C8C8;} .jp_focus {color:black;}
代码很简单，调用也很简单的：placeholder
/** * * 使用方法 * 最简单的调用方式 * $("#").Placeholder(); * $(".").Placeholder(); * $("input[type='值']").Placeholder(); * * *一般调用形式 * $("").Placeholder({ * placeholder: 'data-val', * defaultClass: "class", * tips: '测试文字' * }); */
这里是html代码:
<!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>
效果图，不会做gif图片抱歉，谁有好的软件，介绍一下，谢谢！！！
