脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jquery 小插件，完成“输入字段预期值的提示信息”，防html5 placeholder属性，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 前言：在很多时候，我们需要文本框中显示默认值，获取焦点时，文字框中就会清空给的值，当失去焦点时，如果没有值，继续显示默认的文字，如果有输入值，就显示输入的值。现在项目中需要用到这个地方的功能比较多，于是想到了HTML5中的placeholder属性，但是总所周知，IE是咋们程序员心中的硬伤，不得不放弃。又不想在网上找这类似的，索性就自己写了一个，现在分享出来，供大家参考！

 

下面是插件的主要代码：

 

 

(function ($) {

    $.fn.Placeholder = function (param) {

        VAR defaults = {

            defaultval: &#39;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);

 

 

 

这里是相关的的样式

 

 View Code

 

 

代码很简单，调用也很简单的：placeholder

 

 

/**

* 

* 使用方法

* 最简单的调用方式

* $("#").Placeholder();

* $(".").Placeholder();

* $("input[type='值']").Placeholder();

* 

* 

*一般调用形式

* $("").Placeholder({

*     placeholder: 'data-val',

*     defaultClass: "class",

*     tips: '测试文字'

* });

*/

 

 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jquery 小插件，完成“输入字段预期值的提示信息”，防html5 placeholder属性全部内容，希望文章能够帮你解决javascript代码实例教程-jquery 小插件，完成“输入字段预期值的提示信息”，防html5 placeholder属性所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。