当前位置:编程学习 > JAVA >>

jquery 小插件,完成“输入字段预期值的提示信息”,防html5 placeholder属性

前言:在很多时候,我们需要文本框中显示默认值,获取焦点时,文字框中就会清空给的值,当失去焦点时,如果没有值,继续显示默认的文字,如果有输入值,就显示输入的值。现在项目中需要用到这个地方的功能比较多,于是想到了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);
 
 
 
这里是相关的的样式
 
 View Code
 
 
代码很简单,调用也很简单的:placeholder
 
 
/**
* 使用方法
* 最简单的调用方式
* $("#").Placeholder();
* $(".").Placeholder();
* $("input[type='值']").Placeholder();
*一般调用形式
* $("").Placeholder({
*     placeholder: 'data-val',
*     defaultClass: "class",
*     tips: '测试文字'
* });
*/
 
 
补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,