直接看效果点这里

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. Spring源码阅读-BeanFactory体系结构分析

    BeanFactory是Spring中非常重要的一个类,搞懂了它,你就知道了bean的初始化和摧毁过程,对于深入理解IOC有很大的帮助. BeanFactory体系结构 首先看一下使用IDEA生成的继 ...

  2. javaScript学习关于常用注册监听和对象的创建

    JS 中的自定义对象(扩展内容)                     Object 形式的自定义对象                       对象的定义:                    ...

  3. java常见面试题总结2

    JAVA必背面试题和项目面试通关要点 简单来讲,equals方法主要是用来判断从表面上看或者从内容上看,2个对象是不是相等. 一 数据库 1．常问数据库查询.修改(SQL查询包含筛选查询.聚合查询和链 ...

  4. 从零开始的Java RASP实现(二)

    目录 2 RASP-demo 2.1 类加载机制 双亲委派 BootStrap ClassLoader 2.2 Instrumentation介绍 Instrumentation类中常用方法 Inst ...

  5. Python - typing 模块 —— Callable

    前言 typing 是在 python 3.5 才有的模块 前置学习 Python 类型提示:https://www.cnblogs.com/poloyy/p/15145380.html 常用类型提示 ...

  6. BuildPack 打包

    无需 dockerfile,使用 buildpacks 打包镜像 书接上文,聪明如你已经发现项目中没有定义 dockerfile,但我们依然能打镜像,是如何做到的呢?正如上面提到的 gradle 的 ...

  7. SQL 练习14

    查询两门及其以上不及格课程的同学的学号,姓名及其平均成绩 SELECT Student.SId,Student.Sname,t.不及格课程数,t.平均成绩 from Student, (SELECT ...

  8. STM32+Air202+Air530+HXDZ-30102-ACC心率血氧GPS采集上传到阿里云

    所有资料都在QQ群1121445919 主要功能 HXDZ-30102-ACC采集心率血氧数据 STM32通过串口将数据转发到air202模块 air202将数据上传到阿里云平台进行展示与处理 整合合 ...

  9. mzy git学习，撤销修改(二)

    git checkout – file: 撤销我们对工作区的修改(没有提交到暂存区) 当我们在工作区修改了之后,并没有提交到暂存区,如果要撤销对 某个文件的修改的话,就使用 git checkout ...

  10. vue+vant实现购物车的全选和反选业务，带你研究购物车的那些细节！

    前言 喜欢购物的小伙伴看过来,你们期待已久的购物车来啦!相信小伙伴逛淘宝时最擅长的就是加入购物车了,那购物车是如何实现商品全选反选的呢?今天就带你们研究购物车的源码,以vue+vant为例. 正文 首 ...