zoukankan      html  css  js  c++  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);

    这里是相关的的样式

    .default_placeholder{color: #C8C8C8;}
    .jp_focus {color:black;}
    View Code

    代码很简单,调用也很简单的: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>
    View Code

    效果图,不会做gif图片抱歉,谁有好的软件,介绍一下,谢谢!!!

    demo下载地址

  • 相关阅读:
    Nginx URL后面不加斜杠301重定向
    Jenkins 配置 Node.js 项目
    在 Linux 上搭建IntelliJ IDEA license server服务器
    Vue 使用细节收集
    sinopia 搭建记录
    cli 开发记录
    Cgroup(一)简介
    Kubernetes (一)POD驱逐
    RabbitMQ(五)镜像队列
    RabbitMQ(四)队列结构
  • 原文地址:https://www.cnblogs.com/luxianai/p/3358290.html
Copyright © 2011-2022 走看看