<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GB2312">

<title>验证Valid ----placeholder</title>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <style>

    span.emptyhint {color:#999;position:absolute;padding:3px;}

    </style>

</head>

<body>

<div id=doc3>

    <div id="bd" >

        <div class="section-ctn">

            <ul>

                <li>

                    <label class="k">订单主人：</label>

                    <input type="text" placeholder="请填写订单主人" value="JK">

                </li>

                <li>

                    <label class="k">订单号：</label>

                    <input type="text" placeholder="请填写订单号">

                </li>

                <li>

                    <label class="k">备注：</label>

                    <textarea type="text" placeholder="请填写备注"></textarea>

                </li>

            </ul>

        </div>

    </div>

    <div id="ft">

        部分内容来自 qwrap wagang组件Valid: (<a href="http://dev.qwrap.com/resource/js/wagang/_index.html">http://dev.qwrap.com/resource/js/wagang/_index.html</a>)

    </div>

    <div id="ft">

        QWrap网址： <a href="http://www.qwrap.com">www.qwrap.com</a>

    </div>

</div>

</body>

<script>

function initPlaceHolders(){

    if('placeholder' in document.createElement('input')){ //如果浏览器原生支持placeholder

        return ;

    }

    function target (e){

        var e=e||window.event;

        return e.target||e.srcElement;

    };

    function _getEmptyHintEl(el){

        var hintEl=el.hintEl;

        return hintEl && g(hintEl);

    };

    function blurFn(e){

        var el=target(e);

        if(!el || el.tagName !='INPUT' && el.tagName !='TEXTAREA') return;//IE下，onfocusin会在div等元素触发

        var    emptyHintEl=el.__emptyHintEl;

        if(emptyHintEl){

            //clearTimeout(el.__placeholderTimer||0);

            //el.__placeholderTimer=setTimeout(function(){//在360浏览器下，autocomplete会先blur再change

                if(el.value) emptyHintEl.style.display='none';

                else emptyHintEl.style.display='';

            //},600);

        }

    };

    function focusFn(e){

        var el=target(e);

        if(!el || el.tagName !='INPUT' && el.tagName !='TEXTAREA') return;//IE下，onfocusin会在div等元素触发

        var emptyHintEl=el.__emptyHintEl;

        if(emptyHintEl){

            //clearTimeout(el.__placeholderTimer||0);

            emptyHintEl.style.display='none';

        }

    };

    if(document.addEventListener){//ie

        document.addEventListener('focus',focusFn, true);

        document.addEventListener('blur', blurFn, true);

    }

    else{

        document.attachEvent('onfocusin',focusFn);

        document.attachEvent('onfocusout',blurFn);

    }

    var elss=[document.getElementsByTagName('input'),document.getElementsByTagName('textarea')];

    for(var n=0;n<2;n++){

        var els=elss[n];

        for(var i =0;i<els.length;i++){

            var el=els[i];

            var placeholder=el.getAttribute('placeholder'),

                emptyHintEl=el.__emptyHintEl;

            if(placeholder && !emptyHintEl){

                emptyHintEl=document.createElement('span');

                emptyHintEl.innerHTML=placeholder;

                emptyHintEl.className='emptyhint';

                emptyHintEl.onclick=function (el){return function(){try{el.focus();}catch(ex){}}}(el);

                if(el.value) emptyHintEl.style.display='none';

                el.parentNode.insertBefore(emptyHintEl,el);

                el.__emptyHintEl=emptyHintEl;

            }

        }

    }

}

initPlaceHolders();

</script>

</html>

各种兼容的placeholder的更多相关文章

  1. 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美

    <完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...

  2. placeholder在不同浏览器下的表现及兼容方法 placeholder兼容

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  3. 兼容的placeholder属性

    作为一个.net后台开发的程序猿,博客里既然大多都是前端相关的博文.是不是该考虑换方向了,转前端开发得了 ... 小小吐槽一下,近期受该不该跳槽所困惑,我有选择困难症! 继续前端,这次说一下输入框 p ...

  4. 完美让IE兼容input placeholder属性的jquery实现

    调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案. /* * 球到西山沟 * http://www.cnzj5u.com * 2014/11/26 12:1 ...

  5. IE8兼容placeholder的方案

    用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本 ...

  6. web前端

    设置透明: filter: alpha(opacity=70); opacity: 0.7; 设置文字与文字之间的间隙 letter-spacing: 5px; 设置单词与单词之间的间隙 word-s ...

  7. contenteditable属性让div也可以当做输入框

    你知道div也可以当做输入框么? H5的全局属性contenteditable,带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调 ...

  8. placeholder不兼容 IE10 以下版本的解决方法

    对于密码输入框placeholder的兼容问题:HTML代码:<input type="password" id="loginPassword" plac ...

  9. input placeholder兼容ie10以下

    代码如下: ,) < ) { $('input[placeholder]').each(function(){ var input = $(this); $(input).val(input.a ...

随机推荐

  1. OData 集成

    OData 集成 文档目录 本节内容: 简介 安装 安装Nuget包 设置模块依赖 配置你的实体 创建控制器 示例 获取实体列表 请求 响应 获取单个实体 请求 响应 获取单个实体及导航属性 请求 响 ...

  2. 阿里云Ubuntu服务器安装java环境

    一.下载jdk wget --no-check-certificate --no-cookies --header "Cookie: oraclelicense=accept-secureb ...

  3. poj 3041 Asteroids （最大匹配最小顶点覆盖——匈牙利模板题）

    http://poj.org/problem?id=3041 Asteroids Time Limit: 1000MS   Memory Limit: 65536K Total Submissions ...

  4. php数组内容分页的例子(转)

    php数组内容分页代码 时间:2016-03-04 23:46:34来源:网络 导读:php数组内容分页代码,当前页如果大于总页数,当前页为最后一页,分页显示时,应该从多少条信息开始读取数据.   p ...

  5. 基于jquery中children()与find()的区别介绍

    本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选 ...

  6. VB逆向

    大家或许有所察觉了,随着我们课程的不断深入学习,我们感觉自身逆向的“内功”也在不断的增进! 我们从爆破入手,到现在逐步大家进入程序的内部,认识不同编译器开发的程序,探索不同的加密逻辑. 前边,我们的例 ...

  7. WPF 位置转化和动画

    位置转化 private void DrawScale() { double majorTickUnitValue = this.ScaleSweepLenth / this.MajorDivisio ...

  8. sqlmap文件在tomcat7中运行报错原因及<![CDATA[ ]]>

    sqlmap在eclipse中运行,好好的.放到tomcat7中抛出如下异常: Caused by: java.lang.RuntimeException: Error occurred. Cause ...

  9. 怎样配置spring aop

    1.spring aop配置如下: 1.aspect切面是一个具体类,里面包含各种执行的通知方法.切面类也要注册到ioc容器中. 2.切入点pointcut,可以在每个通知里单独配置,即每个通知可以指 ...

  10. C++中 模板Template的使用

    1.在c++Template中很多地方都用到了typename与class这两个关键字,而且好像可以替换,是不是这两个关键字完全一样呢?答:class用于定义类,在模板引入c++后,最初定义模板的方法 ...