直接看效果点这里

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. 授予mysql的其他用户数据库的使用权限

    场景:不同的开发人员有不同的数据库的权限:也可适用于外包公司不同的开发权限. root用户登录数据库,命令行执行下面语句即可. grant select,delete,update,create,dr ...

  2. sqlplus登录用户被锁问题

    oracle有三个默认的用户名和密码: 1.用户名:sys密码:change_on_install 2.用户名:system密码:manager 3.用户名:scott密码:tiger   当登录用户 ...

  3. wait_time参数

    1.未修改的 wait_timeout 的初始值是28800,单位为秒,等于8个小时 2.wait_timeout过大有弊端,其体现就是mysql里有大量的sleep进程无法及时释放,拖累系统性能 但 ...

  4. SpringBoot开发十二-账号设置

    需求介绍-账号设置 账号设置里面的上传头像(文件) 首先请求必须是一个 POST 请求,其次表单的属性 enctype = "multipart/form-data" 然后就是利用 ...

  5. Qt列表等控件实现平滑滚动&deepin启动器存在的问题

    Qt列表等控件实现平滑滚动 Qt自带的的列表控件是不能平滑滚动的,但如果滚动速度快的话很容易引起视线丢失,体验效果很差.本篇主要讲述如何在Qt中对列表控件加入平滑滚动.文中以QScrollArea控件 ...

  6. Linux提权手法整理

    之前写过了windows提权小结,这下一篇水什么就有了嘛,于是有了这篇水文,整理一下Linux提权 前篇windows提权小结 ,链接送上 https://www.cnblogs.com/lcxblo ...

  7. Sqli-Labs less13-16

    less-13 首先,输入用户名和密码,发现只有成功和失败两种显示,没有数据回显: 然后我们抓包拿到数据: 我们通过上述观察,已经知道这是典型的盲注,可以采用布尔盲注或者时间盲注. 构造注入语句:un ...

  8. 000 PCI Express协议入门指南目录

    一.001 PCI Express体系结构(一)

  9. Skywalking-07：OAL原理——解释器实现

    OAL 解释器实现 OAL 解释器是基于 Antlr4 实现的,我们先来了解下 Antlr4 Antlr4 基本介绍 Antlr4 使用案例 参考Antlr4的使用简介这篇文章,我们实现了一个简单的案 ...

  10. kettle 查询 tinyint 值为 Y，kettle 查询 tinyint 为布尔值

     问题解决方法 1.在数据库连接中的[选项]命令参数中加入:tinyInt1isBit = false,如下图: 实际场景: