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

  2. 关于新装ubuntu系统update失败和build-essential失败的解决办法

    我是12月4日在新电脑上的vmware-workstation 10 上安装的ubuntu14.04LTS,但安装后再校园环境下总是build-essential失败,上网一查,说是要先update, ...

  3. Customizing Zend Studio Using the Welcome Page

    Customizing Zend Studio Using the Welcome Page Zend Studio enables you to add or remove plugins from ...

  4. sheelエラー、オブジェクトを解析中にエラーが発生しました。

  5. Werkzeug源码阅读笔记(三)

    这次主要讲下werkzeug中的Local. 源码在werkzeug/local.py Thread Local 在Python中,状态是保存在对象中.Thread Local是一种特殊的对象,它是对 ...

  6. C#的线程池的那些事

    最近在做站时发现,线程池的问题很棘手,所以总结了一篇关于线程池的文章,原文地址:http://www.shuonar.com/blog/ac16496b-87ec-4790-a9ea-d69bbffa ...

  7. C++ string实现原理

    C++程序员编码过程中经常会使用string(wstring)类,你是否思考过它的内部实现细节.比如这个类的迭代器是如何实现的?对象占多少字节的内存空间?内部有没有虚函数?内存是如何分配的?构造和析构 ...

  8. image.xx.com 通过haproxy 跳转到内部图片服务器

    <pre name="code" class="html">http://www.hyyche.com/#main C:\Users\Adminis ...

  9. C语言入门（7）——自定义函数

    C源程序是由函数组成的.虽然在C语言入门系列前面几篇的程序中大都只有一个主函数main(),但实用程序往往由多个函数组成.函数是C源程序的基本模块,通过对函数模块的调用实现特定的功能.C语言中的函数相 ...

  10. [LeetCode][Python]Palindrome Number

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com'https://oj.leetcode.com/problems/palindr ...