直接看效果点这里

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);

【回忆1314】回忆之placeholder的更多相关文章

  1. 【回忆1314】抽奖之Flash大转盘

    1.搭建JS与Flash互通的环境 function thisMovie(movieName){ if (window.document[movieName]) { return window.doc ...

  2. 【回忆1314】第一次用AngularJS

    1.创建指令的4种方式(ECMA) var appModule = angular.module('app', []); appModule.directive('hello', function() ...

  3. OI再见

    以下是一只蒟蒻的回忆： 1.进入高一 小县城不重视OI，直到进了高中才知道有OI这个东西，于是我就开始了OI…（看，够弱的吧，相信你是小学就开始学了） 学了几天Pascal语法后，被老师报上了NOIP ...

  4. hope is a good thing!

    好久没有写博客了,在这么特殊的日子里,似乎不写点东西感觉总是少了点什么.其实从昨天开始就在努力的回忆,回忆自己这个2014年都做了些什么?自己收获了些什么?突然就觉得去年的那个暑假是那么的熟悉,怎么又 ...

  5. NOIP2014 行记

    不知道OI是啥或者信息学竞赛是啥的可以按`Ctrl+W`. <del>很早开始写的..准备出分之后再发布.</del> 谨以此文纪念我信息学竞赛的第一次正式考试. 背景音乐底部 ...

  6. 【java编程】ServiceLoader使用看这一篇就够了

    转载:https://www.jianshu.com/p/7601ba434ff4 想必大家多多少少听过spi,具体的解释我就不多说了.但是它具体是怎么实现的呢?它的原理是什么呢?下面我就围绕这两个问 ...

  7. NOI2021 去不了记

    没错,由于某些 zszz 的原因,我是真的去不了了(指去不了 ZJ) Day -11 ~ -7 - 2021.7.12 - 2021.7.16 令人自闭的 ISIJ 终于结束了----From ycx ...

  8. [源码解析] PyTorch 分布式 Autograd (4) ---- 如何切入引擎

    [源码解析] PyTorch 分布式 Autograd (4) ---- 如何切入引擎 目录 [源码解析] PyTorch 分布式 Autograd (4) ---- 如何切入引擎 0x00 摘要 0 ...

  9. 回忆之placeholder

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

随机推荐

  1. Android实现三级联动下拉框 下拉列表spinner

    Android实现(省.市.县)三级联动下拉框 下拉列表spinner 转载请注明出处: http://www.goteny.com/articles/2013/11/46.html http://w ...

  2. ng-options

    tr td 地点 td select.form-control(required="true" ng-model="addkc.dd" ng-options=& ...

  3. Currency 货币 filter

    angularjs 其实也有一个currency指令,不过好像只是换符号而已. 这里自己写了一个简单的兑换率filter <div ng-controller="ctrl"& ...

  4. poj 1819 Disks

    http://poj.org/problem?id=1819 #include <cstdio> #include <cstring> #include <cmath&g ...

  5. [LeetCode 111] - 二叉树的最小深度 (Minimum Depth of Binary Tree)

    问题 给出一棵二叉树,找出它的最小深度. 最小深度是指从根节点沿着最短路径下降到最近的叶子节点所经过的节点数. 初始思路 不难看出又是一个需要层次遍历二叉树的题目,只要在112基础上作出简单修改即可得 ...

  6. 关于 "Context" 模式（基于COM思想IUnknown思想）

    有同事很喜欢用Context模式,觉得是自己"首创", 我有些自己的想法, 或者大家可以发表下自己的观点.   什么是Context模式? 23种设计模式中没有这个模式, 是同事自 ...

  7. Java 多线程之龟兔赛跑（文件夹——读取文件——时间）

    版权声明:本文为博主原创文章,未经博主允许不得转载. 描述: 乌龟和兔子(各自是一个Java线程)在我们的电脑上赛跑,我们为它们指定一个跑道(本地文件系统上的一个目录,该目录包含子目录).跑的规则是读 ...

  8. .sdp文件格式介绍

    最近做RTSP流播放,需要了解.sdp这种会话描述的文件格式,当然,里面的具体语法有SDP解析器来分析.但是我需要大概了解一些字段的意思,它是文本描述的,采用key value的形式描述. https ...

  9. poj 2287 动态规划

    用贪心简单证明之后就是一个从两头取的动态规划 #include <iostream> #include <cstring> #include <cstdio> #i ...

  10. 利用ftrace跟踪内核static tracepoint——实例writeback event

    摘要:和很多linux内核子系统一样,static tracepoint有很多层次,其中某个层次都展示给不同层次的开发者来满足他们的不同需求.关于linux tracepoint的详细信息,我们可以在 ...