由于版面限制,简单说下,详细的内容及在线预览、预览版压缩包,见这里
http://levi.cg.am/archives/3507

为什么说是标准兼容:

因为大多数placeholder插件是这样兼容的
点击输入框,提示信息消失;而离开输入框后,若文字为空,则展示提示信息

而这次我要实现的目的在于让IE6-9实现和chrome、firefox一样:
点击输入框后,提示信息不会立即消失,当敲下键盘按键的时候,提示信息消失;当删除文字内容为空的时候,展示提示信息

目前此插件为预览版,希望大家能够多多提意见,正式版,下周见
​1. [代码][JavaScript]代码   
    
;(function($) {
    $(function() {
        if ('placeholder' in document.createElement('input')) {
            return this;
        }
 
        $(document).on('holder mousedown keydown keyup', 'input, textarea', function(e) {
            var $this = $(e.target);
            switch(e.type) {
                case 'holder':
                    var tips = $this.attr('placeholder');
                    if (!tips.length) return false;
                    if (!$this.val().length) {
                        $this.val(tips).addClass('placeholder').data({'holder': 1, 'tips': tips});
                    } else {
                        $this.data({'holder': 0, 'tips': tips});
                    }
                    break;
                case 'mousedown':
                    if (!!$this.data('holder')) {
                        var $pwd = $this.data('pwd'),
                            $inp = $this.clone().insertAfter($this).data({
                                'holder': 1,
                                'tips': $this.data('tips')
                            }).focus();
 
                        $pwd && $inp.data('pwd', $pwd) && $pwd.data('tar', $inp);
                        $this.remove();
                        return false;
                    }
                case 'keydown':
                    if (!!$this.data('holder')) {
                        var $pwd = $this.data('pwd');
                        if (!$pwd) {
                            $this.val('').removeClass('placeholder').data('holder', 0);
                        } else {
                            $pwd.show().focus();
                            $this.hide();
                        }
                    }
                    break;
                case 'keyup':
                    if (!$this.val().length && $this.data('holder') != undefined) {
                        var tips = $this.data('tips'), $tar = $this.data('tar'), _rel = (!$tar && !!tips);
                        (function(par) {http://www.enterdesk.com/special/shouhui/
                            this.val(tips).addClass('placeholder').data('holder', 1).show().trigger('mousedown');
                            !par && $this.hide();手绘图片
                        }).call(_rel ? $this : $tar, _rel);
                    }
                    break;
            }  
        });
 
        $('[placeholder]:password').each(function() {
            var $this = $(this), tips = $this.attr('placeholder'), $inp;
            if (tips.length) {
                $inp = $('<input>', {
                    'type': 'text',
                    'class': $this.attr('class'),
                    'style': $this.attr('style'),
                    'placeholder': tips,
                    'rel': 'pwdholder'
                }).insertAfter($this).data('pwd', $this);
                $this.data({'tar': $inp, 'holder': 0, 'tips': tips});
                ($this.val().length ? $inp : $this)['hide']();
            }
        });
 
       
$('input, textarea').not(':radio, :checkbox, :hidden, :button, :submit,
:file, :password').filter('[placeholder]').trigger('holder');
    });
})(jQuery);

标准兼容HTML5输入框提示信息的插件iHolder_v0.1.06.21.2014_预览版的更多相关文章

  1. HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...

  2. 发布 vscode 插件 Cnblogs Client For VSCode 预览版

    为了方便大家使用 vscode 发布博文,我们做了一个小插件,今天发布预览版,欢迎大家试用并反馈问题与建议. 插件的英文名称是 Cnblogs Client For VSCode,简称是 vscode ...

  3. JQuery插件:图片上传本地预览插件,改进案例一则。

    /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...

  4. 基于HTML5和JSP实现的图片Ajax上传和预览

    本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...

  5. Vim安装插件支持 MarkDown 语法、实时预览等

    使用 markdown-preview.vim 插件可以实时通过浏览器预览 markdown 文件 使用该插件需要 vim 支持py2/py3 安装 使用 vim-plug: 在 .vimrc 或 i ...

  6. vue项目使用vue-photo-preview插件实现点击图片放大预览和移动

    官方链接: http://npm.taobao.org/package/vue-photo-preview # 安装 npm install vue-photo-preview --save # 引入 ...

  7. js图片预览插件,不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  8. html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  9. JS图片上传预览插件制作(兼容到IE6)

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

随机推荐

  1. 【VBS】检索Outlook本地邮箱

    实现功能:使用VBS检索Outlook本地邮箱中,今天是否收到某标题的邮件. 代码如下: ' yyyy-m-d 0:00 AM ' yyyy-m-d 11:59 PM Function CheckMa ...

  2. kettle转换之多线程

    kettle转换之多线程   ETL项目中性能方面的考虑一般是最重要的.特别是所讨论的任务频繁运行,或一些列的任务必须在固定的时间内运行.本文重点介绍利用kettle转换的多线程特性.以优化其性能. ...

  3. Ubuntu搭建Http服务器

    一句命令: sudo apt-get install apache2 产生的启动和停止文件是:/etc/init.d/apache2 启动:sudo apache2ctl -k start 停止:su ...

  4. ORACLE物化视图具体解释

    一.物化的一般使用方法物化视图是一种特殊的物理表,"物化"(Materialized)视图是相对普通视图而言的.普通视图是虚拟表.应用的局限性大,不论什么对视图的查询.oracle ...

  5. 吐血整理:PyTorch项目代码与资源列表 | 资源下载

    http://www.sohu.com/a/164171974_741733   本文收集了大量基于 PyTorch 实现的代码链接,其中有适用于深度学习新手的“入门指导系列”,也有适用于老司机的论文 ...

  6. java nio读取和写入文件

    读取 package com.test; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputS ...

  7. 精彩回顾 HUAWEI HiAI 亮相华为北研所

    ​​从普通照片变成艺术品,仅需3秒: 从随手拍下的讲解胶片到生成规整清晰的ppt,只要瞬间…… 5月25日在华为北京研究所举办的HUAWEI HiAI技术合作交流会上,伴随着一声声惊叹,数款接入HUA ...

  8. centOS解决乱码问题

    问题描述:输入javac出现乱码,部分字符不能显示解决方法 echo 'export LANG=en_US.UTF-8' >> ~/.bashrc

  9. Appium python自动化测试系列之使用HTMLTestRunner生成测试报告(十三)

    ​13.1 测试报告概述 13.1.1 测试报告的定义 在前面章节我们已经讲了自动化基础的很多东西,如果说掌握了,而且自己动手去练习了,我相信在一些初级的面试中是没任何问题的,今天我们接触的应该算是一 ...

  10. H2 database 操作操作内存表

    本例开发工具为 NetBeans,使用b2前提安装jdk. 第一步:在官网下载驱动包 :http://www.h2database.com ,本例版本为: h2-1.4.192.jar 第二步:安装开 ...