直接看效果点这里

HTML

<!DOCTYPE html>

<html>

<head lang="zh-CN">

    <meta charset="utf-8">

    <title> Placeholder </title>

</head>

<body>

<input class="J_Placeholder" type="text" value=""/>

<textarea class="J_Placeholder"></textarea>

<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

<script src="jquery.placeholder.js"></script>

<script>

$('.J_Placeholder').placeholder({

    'txt': '请输入提示信息'

});

</script>

</body>

</html>

JS

/**

 * @description: 表单input、textarea占位提示

 * @author:jununx@gmail.com

 * @update: 2014/11/10

 *

 * @param txt{string} 提示信息语句

 *

 * 用法

 *

 * $('.J_Placeholder').placeholder({

 *     'txt': '请输入提示信息'

 * });

 */

;(function($){

    var methods = {

        init: function(opts){

            this.isHtml5Placeholder() ? this.changeHtml5Placeholder(opts) : this.changePlaceholder(opts);

        },

        isHtml5Placeholder: function(){

            var res = 'placeholder' in document.createElement('input');

            return res;

        },

        changePlaceholder: function(opts){

            opts.that.attr('value') == '' && opts.that.attr({

                'value': opts.txt

            });

            opts.that

                .on('focus', function(){

                    if($(this).val() === opts.txt){

                        $(this).attr('value', '');

                    }

                })

                .on('blur', function(){

                    if($(this).val() == ''){

                        $(this).attr({

                            'value': opts.txt

                        });

                    }

                });

        },

        changeHtml5Placeholder: function(opts){

            opts.that.attr({

                'placeholder': opts.txt

            });

        }

    };

    $.fn.placeholder = function(opts){

        opts = $.extend({

            'that': this,

            'txt': ''

        }, opts || {});

        methods.init(opts);

        return this;

    };

})(jQuery);

回忆之placeholder的更多相关文章

  1. 【回忆1314】回忆之placeholder

    直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charse ...

  2. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  3. Placeholder如何换行

    使用js动态添加标签充,处理换行问题 var placeholder = 'This is a line \nthis should be a new line'; $('textarea').att ...

  4. 关于input标签和placeholder在IE8，9下的兼容问题

    一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...

  5. 兼容IE8 input的placeholder的文字显示

    if( !('placeholder' in document.createElement('input')) ){ $('input[placeholder],textarea[placeholde ...

  6. input type="datetime-local" 时placeholder不显示

    一个坑,input的type="datetime-local" 时,电脑上会显示提示,如图 <input type="datetime-local" na ...

  7. input placeholder属性 样式修改(颜色,大小,位置)

    placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  8. UITextField的placeholder文字的位置，颜色等的自定义设置

    //控制placeHolder的位置,左右缩20 -(CGRect)placeholderRectForBounds:(CGRect)bounds { CGRect inset = CGRectMak ...

  9. placeholder实现的两种方式

    /** * PlaceHolder组件 * $(input).placeholder({ * word: // @string 提示文本 * color: // @string 文本颜色 * evtT ...

随机推荐

  1. Distribute SSH Pubkey to Multiple Hosts with Fabric

    Generate ssh keys on source host with ssh-keygen; Disable known_hosts prompt(optional): add "St ...

  2. Linux应用程序安装方法

    一.linux应用程序基础 1.1.应用程序与系统命令的关系 1.2.典型应用程序的目录结构 1.3.常见的软件包封装类型 二.RPM包管理工具 2.1.RPM软件包管理器Red-Hat Packag ...

  3. windows中抓取hash小结（下）

    书接上回,windows中抓取hash小结(上) 指路链接 https://www.cnblogs.com/lcxblogs/p/13957899.html 继续 0x03 从ntds.dit中抓取 ...

  4. Vue一些需要记住的指令/属性

    v-once:只能使得组件解析执行一次的指令,如: <div id="app"> <p>{{count}}</p> <!--count在v ...

  5. metasploit的数据库配置

    metasploit所处位置:/usr/share/metasploit-framework msf数据库连接命令:db_connect msf:msfadmin@127.0.0.1/msf 1.启动 ...

  6. L298N使用资料

    L298N驱动连接arduino小车电机(代码和使用): https://www.cnblogs.com/fsong/p/12309911.htmlarduino UNO 连接L298N驱动两个电机转 ...

  7. noip35

    T1 考场乱搞出锅了... 正解: 把原序列按k往左和往右看成两个序列,求个前缀和,找下一个更新的位置,直接暴跳. Code #include<cstdio> #include<cs ...

  8. jenkins+docker部署java项目

    jenkins + maven + jdk + docker + docker register + dockerfile jenkins插件 # 安装插件 SSH # 配置 系统设置-> SS ...

  9. 多线程编程<四>

    1 /** 2 * 守护线程daemon['diːmən] 3 * @author Administrator 4 * 5 */ 6 public class DaemonDemo { 7 publi ...

  10. sparksql字段类型转换

    1.spark sql 计算时,一定要注意精度的问题,一般像金额之类的值,要先转换为double或者 decimal来进行计算了. 一.sql的方式:select shop_id,order_id,s ...