<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>Placeholder兼容各大浏览器的例子</title>

    <script src="jquery-1.8.0.min.js"></script>

</head>

<body>

<form>

    <div>

        <ul>

            <li>

                <input type="text" name="username" placeholder="用户名">

            </li>

            <li>

                <input type="password" name="username" placeholder="密码">

            </li>

            <li>

                <button type="button">登录</button>

            </li>

        </ul>

    </div>

</form>

</body>

</html>

<!--以下就是代码也可以单独起个名字，使用link在头部引用-->

<script>

    /*

     * jQuery placeholder, fix for IE6,7,8,9

     * @author JENA

     * @since 20131115.1504

     * @website ishere.cn

     */

    var JPlaceHolder = {

        //检测

        _check : function(){

            return 'placeholder' in document.createElement('input');

        },

        //初始化

        init : function(){

            if(!this._check()){

                this.fix();

            }

        },

        //修复

        fix : function(){

            jQuery(':input[placeholder]').each(function(index, element) {

                var self = $(this), txt = self.attr('placeholder');

                self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));

                var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');

                var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());

                self.focusin(function(e) {

                    holder.hide();

                }).focusout(function(e) {

                    if(!self.val()){

                        holder.show();

                    }

                });

                holder.click(function(e) {

                    holder.hide();

                    self.focus();

                });

            });

        }

    };

    //执行

    jQuery(function(){

        JPlaceHolder.init();

    });

</script>

亲测，IE各版本都支持

☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆的更多相关文章

  1. 阻止a标签跳转四种方法 兼容各大浏览器(包括IE)

    阻止a标签跳转四种方法 兼容各大浏览器(包括IE) HTML <!--第一种--> <a href="javascript:;">我不会被跳转</a& ...

  2. JavaScript 兼容各大浏览器阻止冒泡事件

    JavaScript 兼容各大浏览器阻止冒泡事件 function stopEvent(event) { //阻止冒泡事件 //取消事件冒泡 var e = arguments.callee.call ...

  3. 怎么控制表单placeholder属性的样式兼容各大浏览器？

    当我们使用placeholder的时候会遇到样式的控制和版本的兼容问题(但是还是只有css3支持),以至于达不到我们想要的效果,下面来看一种: 下面是css: .invalid:-moz-placeh ...

  4. jquery.zclip—复制剪贴板（兼容各大浏览器）

    开始前说两句 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内 ...

  5. 兼容各大浏览器的event获取

    event: //得到事件 function getEvent(evt){ if (evt && typeof(evt) != "undefined") { var ...

  6. js的window.onscroll事件兼容各大浏览器

    为窗口添加滚动条事件其实非常的简单, window.onscroll=function(){}; 注意在获取滚动条距离的时候 谷歌不识别document.documentElement.scrollT ...

  7. Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法

    <script type="text/javascript"> $('input:text:first').focus(); document.onkeydown = ...

  8. 简单实现兼容各大浏览器的js复制内容到剪切板

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...

  9. Enter回车切换输入焦点方法兼容各大浏览器

    做项目时,客户要求能够用enter回车直接切换输入(焦点),当最后一个时候,直接提交信息. 第一想法就是,网上去copy一段代码直接用.但了百度.谷歌找了个遍,找到的代码80%以上都是一样的.有的代码 ...

随机推荐

  1. java总结2

    1,对象数组,必须指定了数组长度,长度是固定的 2,除了ArrayList<E>以外,类赋值给变量,只有string类拿到的是值,其他类拿到的都是类的地址值, ArrayList<E ...

  2. Codeforces Gym 100851 K King's Inspection ( 哈密顿回路 && 模拟 )

    题目链接 题意 : 给出 N 个点(最多 1e6 )和 M 条边 (最多 N + 20 条 )要你输出一条从 1 开始回到 1 的哈密顿回路路径,不存在则输出 " There is no r ...

  3. ASP.NET MVC Ajax下载文件(使用NPOI向现有的excel模板文件里面添加数据)

    View Html.DevExpress().Button(DevExpressButtonHelper.AddButton(ViewBag.Form, "Export", &qu ...

  4. 【商业智能VS人工智能】

    什么是智能? 从感觉到记忆到思维这一过程,称为“智慧”,智慧的结果就产生了行为和语言,将行为和语言的表达过程称为“能力”,两者合称“智能”,将感觉.去记.回忆.思维.语言.行为的整个过程称为智能过程, ...

  5. mac osx终端批量删除文件

    sudo su cd / find ./ -name "*.html" -exec rm -rf {} \;  注意 {}和\;之间有空格 find [目录名] -name &qu ...

  6. [LeetCode]-011-Container_With_Most_Water

    Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai).  ...

  7. java中Thread (线程)

    Thread 使用新线程的步骤: 通过覆写 Thread 的 run 方法,配置新线程需要做的事情 创建新线程对象 new YourThread() 开启线程 start 创建新线程的方法有很多,下面 ...

  8. vue中下载excel的使用，后端链接两种情况，一个是链接，一个是文件流

    vue中下载excel使用 一.这是第一种情况,后台链接地址返回的是一个url,这个时候我只要在导出按钮上绑定exportData()这个事件方法就好了 exportData() {     this ...

  9. POJ 1625 Censored ( Trie图 && DP && 高精度 )

    题意 : 给出 n 个单词组成的字符集 以及 p 个非法串,问你用字符集里面的单词构造长度为 m 的单词的方案数有多少种? 分析 :先构造出 Trie 图方便进行状态转移,这与在 POJ 2278 中 ...

  10. ACM ICPC 2011-2012 Northeastern European Regional Contest（NEERC）B Binary Encoding

    B: 现在有一种新的2进制表示法,要你求出0~m-1的每个数的表示. 规则如下:n 是满足 m<=2n 最小数. 而0~m-1的数只能够用n-1个位和n个位来表示. 对于n个位表示的数来说不能有 ...