前言：在很多时候，我们需要文本框中显示默认值，获取焦点时，文字框中就会清空给的值，当失去焦点时，如果没有值，继续显示默认的文字，如果有输入值，就显示输入的值。现在项目中需要用到这个地方的功能比较多，于是想到了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图片抱歉，谁有好的软件，介绍一下，谢谢！！！

demo下载地址

jquery 小插件，完成“输入字段预期值的提示信息”，防html5 placeholder属性的更多相关文章

  1. 黑色半透明镂空遮罩指引效果实现jQuery小插件

    /*! * by zhangxinxu(.com) 2017-05-18 * 新版上线时候的黑色半透明镂空遮罩指引效果实现jQuery小插件 * 兼容到IE8+ * MIT使用协议,使用时候保留版权 ...

  2. 基于HTML5 audio元素播放声音jQuery小插件

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...

  3. PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能

    XHTML 首先将jquery库和相关ui插件,以及css导入.一共引用三个 jquery ,jquery_ui.js,jquery-ui.css 三个文件,不同版本小哥可能稍有差异(最后注意ajax ...

  4. 一款jquery小插件：实现轻松获取和绑定编辑表单的值（带源码）

    实现目的:通常在项目中,编辑页面在前后台需要一个一个框赋值,取值操作,小伙伴们普遍都会感觉繁琐,麻烦.: 实现思路:利用json对象化键值的思想: 好处:方便快速开发,提高开发效率,减少重复性代码: ...

  5. 自己写的自动生成动态边框的jquery小插件

    思路就是在元素四周添加<ul>列表,然后周期性地改变它的颜色,实现动态的效果,不支持ie7.ie8 预览链接http://gorey.sinaapp.com/myBorder/border ...

  6. 学习写了一个点击按钮倒计时的jquery小插件

    (function($) { $.fn.extend({ getSms: function(value) { value = $.extend({ wait: 60, //参数, 默认60秒 }, v ...

  7. 文本框/域文字提示(placeholder)自动显示隐藏jQuery小插件

    // 文本框文本域提示文字的自动显示与隐藏 (function($){ $.fn.textRemindAuto = function(options){ options = options || {} ...

  8. HTML 5 <input> placeholder 属性 实现搜索框提示文字点击输入后消失

    H5之前要实现这个功能还要用到JS,H5出来之后新增加了placeholder属性,有了这个属性就就能轻松实现这个功能. 定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(h ...

  9. 浮动【电梯】或【回到顶部】小插件：iElevator.js

    iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null ...

随机推荐

  1. 相比于python2.6，python3.0的新特性。

    这篇文章主要介绍了相比于python2.6,python3.0的新特性.更详细的介绍请参见python3.0的文档. Common Stumbling Blocks 本段简单的列出容易使人出错的变动. ...

  2. MYSQL定时创建表分区

    MYSQL定时创建表分区 一.存储过程-表分区-----------------------------------------------------------------需求: 每月创建一个分区 ...

  3. 用CSS3绘制图形

    参考资料:http://blog.csdn.net/fense_520/article/details/37892507 本文非转载,为个人原创,转载请先联系博主,谢谢~ 准备: <!DOCTY ...

  4. Internet设置->连接选项卡->局域网(LAN)设置 某些设置由系统管理员进行管理

    今天突然发现ss不能使用了.经过一系列排查发现 Internet设置->连接选项卡->局域网(LAN)设置 某些设置由系统管理员进行管理,如上图. 修改注册表值HKEY_LOCAL_MAC ...

  5. 使QQ窗口八字形转圈

    //先有思路 后有代码 总是不知不觉中乱敲一通 今天做个标记 感谢老师课堂上的讲解#include <stdio.h> #include <math.h> #include & ...

  6. 你可能不知道的一些JavaScript 奇技淫巧

    这里记录一下以前学习各种书籍和文章里边出现的JS的小技巧,分享给大家,也供自己查阅,同时感谢那些发现创造和分享这些技巧的前辈和大牛们. 1.遍历一个obj的属性到数组 var a=[]; for(a[ ...

  7. Red Hat Enterprise Linux Release Dates

    Red Hat Enterprise Linux Release Dates UpdatedMay 10 2016 at 10:57 PM - English The tables below lis ...

  8. Unix/Linux环境C编程入门教程(4) Debian Linux环境搭建

    Unix/Linux版本众多,我们推荐Unix/Linux初学者选用几款典型的Unix/Linux操作系统进行学习. 1.广义的Debian是指一个致力于创建自由操作系统的合作组织及其作品,由于Deb ...

  9. 一个好用的VC DBGRID[图]

    本文示例源代码下载 CGridCtrl_demo19_01.zip为演示CGridCtrl的使用 CGridCtrl_demo19_02.zip演示与CMYODBC的配合使用 一.引言 在用vc开发关 ...

  10. NOI2011 Day1

    NOI2011 Day1 兔农 题目描述:\(fib[1]=fib[2]=1, fib[i]=fib[i-2]+fib[i-1] (i\geq 3)\),若\(fib[i] \equiv 1(mod ...