直接看效果点这里

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. 阿里云NAS文件迁移项目实践

    阿里云文件存储NAS是阿里云推出的用于传统文件共享的,使用NFS协议挂载的共享文件夹. 产品背景 下图是NAS和阿里云另一明星产品OSS以及块存储EBS的区别 NAS核心优势:无需修改程序,挂载之后, ...

  2. CSS Transform完全指南 #flight.Archives007

    Title/ CSS Transform完全指南 #flight.Archives007 序: 第7天了! 终身学习, 坚持创作, 为生活埋下微小的信仰. 我是忘我思考,共同进步! 简介: 一篇最简约 ...

  3. 阿里云云服务器 ECS和云数据库 PolarDB的简单使用

    阿里云云服务器 ECS和云数据库 PolarDB的简单使用 仅作为记录自己的操作使用,主要是怕自己太久不用都忘了 登录阿里云以后点击控制台 然后找到云服务器ECS,点击进入 在左侧找到实例,点击进入 ...

  4. [11 Go语言基础-可变参数函数]

    [11 Go语言基础-可变参数函数] 可变参数函数 什么是可变参数函数 可变参数函数是一种参数个数可变的函数. 语法 如果函数最后一个参数被记作 ...T ,这时函数可以接受任意个 T 类型参数作为最 ...

  5. 010 FPGA千兆网UDP通信【转载】

    一.以太网帧格式 图8‑12以太网帧格式 表8‑5以太网帧格式说明 类别 字节数 说明 前导码(Preamble) 8 连续 7 个 8'h55 加 1 个 8'hd5,表示一个帧的开始,用于双方设备 ...

  6. docker 安装mysql设置不区分表名大小写，创建minio，设置开机自启动

    环境deepin mysql : docker run -p 3306:3306 --name tyer-mysql --restart=always -v $PWD/conf:/etc/mysql/ ...

  7. SpringDataJpa使用原生sql(EntityManager)动态拼接,分页查询

    SpringDataJpa Spring Data JPA是较大的Spring Data系列的一部分,可轻松实现基于JPA的存储库.该模块处理对基于JPA的数据访问层的增强支持.它使构建使用数据访问技 ...

  8. 综合练习——寻找有潜力的bilibili百大UP主（1）

    寻找有潜力的bilibili百大UP主(1) 防喷说明:以下仅为个人学习之余的娱乐项目,本人不主动赋予以下内容任何价值,不确保内容的准确性 欢迎各位友善的指出错误 目录 寻找有潜力的bilibili百 ...

  9. asp.net core 知识点总结

  10. WPF Grid新增框选功能

    有时候会有框选的需求,类似EXCEL一样,画一个框选择里面的子控件. 选择后比如可以将子控件的Border设置为红色边框 说下这个功能的大致原理.背景是一个Grid,比如里面放了很多的Button.  ...