<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>中宏网络商学院-用户登录</title>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

</head>

<script type="text/javascript">

    //判断浏览器是否支持 placeholder属性

    function isPlaceholder() {

        var input = document.createElement('input');

        return 'placeholder' in input;

    }

    $(document).ready(function () {

        if (!isPlaceholder()) {  //不支持placeholder 用jquery来完成

            var loginAccount = document.getElementById('LoginAccount').getAttributeNode('placeholder').nodeValue;

            var LoginPassword = document.getElementById('LoginPassword').getAttributeNode('placeholder').nodeValue;

            var style = document.getElementById('LoginPassword').getAttributeNode('class').nodeValue;

            $("input[id='LoginAccount']").each(//把input绑定事件 排除password框

                function () {

                    if ($(this).val() == "" && loginAccount != "") {

                        $(this).val(loginAccount);

                        $(this).focus(function () {

                            if ($(this).val() == loginAccount) $(this).val("");

                        });

                        $(this).blur(function () {

                            if ($(this).val() == "") $(this).val(loginAccount);

                        });

                    }

                });

            //对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换

            var pwdField = $("input[type=password]");

            var pwdVal = LoginPassword;

            pwdField.after('<input id="pwdPlaceholder" type="text" value=' + pwdVal + ' autocomplete="off" class="' + style + '"  tabindex = "2" />');

            var pwdPlaceholder = $('#pwdPlaceholder');

            pwdPlaceholder.show();

            pwdField.hide();

            pwdPlaceholder.focus(function () {

                pwdPlaceholder.hide();

                pwdField.show();

                pwdField.focus();

            });

            pwdField.blur(function () {

                if (pwdField.val() == '') {

                    pwdPlaceholder.show();

                    pwdField.hide();

                }

            });

            if (document.getElementById('LoginValCode') != null) {

                var LoginValCode = document.getElementById('LoginValCode').getAttributeNode('placeholder').nodeValue;

                var style = document.getElementById('LoginValCode').getAttributeNode('class').nodeValue;

                $("input[id='LoginValCode']").each(//把input绑定事件 排除password框

                function () {

                    if ($(this).val() == "" && LoginValCode != "") {

                        $(this).val(LoginValCode);

                        $(this).focus(function () {

                            if ($(this).val() == LoginValCode) $(this).val("");

                        });

                        $(this).blur(function () {

                            if ($(this).val() == "") $(this).val(LoginValCode);

                        });

                    }

                });

            }

        }

    });  

</script>

<body>

<div class="wrap-full">

    <div class="block-box block-box-1 mt-45">

        <div class="block-body">

            <div class="block-cont">

                <div class="block-tit rel"><span class="ico abs"></span>用户登录</div>

                <div class="clear">

                    <div class="w-4 mtb100 br fl">

                        <ul class="list-login">

                            <li><span class="ico ico-1"></span> <input type="text" class="ipt" id="LoginAccount" placeholder="请输入身份证号码"></li>

                            <li><span class="ico ico-2"></span> <input type="password" class="ipt" id="LoginPassword" placeholder="请输入密码"></li>

                            <li class="clear"><span class="ico ico-3"></span> <input type="text" class="ipt ipt-s fl" id="LoginValCode" placeholder="请输入验证码"><span class="code fr"><img src="data:images/code.jpg" alt=" "></span></li>

                            <li><button type="button" class="btn">立即登录</button></li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

</body>

</html>

解决IE8placeholder属性问题的更多相关文章

  1. VS 错误解决(项目-属性-启用调试器)

    我是先安装了VS2012, 之后由于需要安装了VS2008, 但在VS2012中可以运行程序但是不能调试, 即按Ctrl+F5可以运行, 但是按F5会提示错误. "尝试运行项目时出错:Unc ...

  2. BootstrapValidator 解决多属性被同时校验问题

    问题描述:在使用bootstrapValidator插件校验表单属性,当表单属性过多需要每行并列多个属性 ,会出现校验第一个属性,发现整行被校验的效果 ,这不是我们工作想要的效果.如图: 问题分析:因 ...

  3. Java使用序列化的私有方法巧妙解决部分属性持久化问题

    部分属性持久化问题看似很简单,只要把不需要的持久化的属性加上瞬态关键字(transient关键字)即可,没错,这也是一种解决方案,但在有的时候行不通,例如在一个计税系统和人力系统对接的时候,计税系统需 ...

  4. 解决opacity属性在低版本IE浏览器下失效的方法

    以前,一直都以为ie9以下的版本不支持opacity属性.所以就同时使用 opacity和ie独特的filter蒙版.但是有些时候需要一些动态的效果,就比如层的渐渐消失,隐藏,就需要使用动态变化的op ...

  5. 周记3——解决fixed属性在ios软键盘弹出后失效的bug

    这周在做空间(“类似”qq空间)项目.首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部.此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了.后来发现,ios绝大 ...

  6. BootstrapValidator 解决多属性被同时校验问题《转》

    问题描述:在使用bootstrapValidator插件校验表单属性,当表单属性过多需要每行并列多个属性 ,会出现校验第一个属性,发现整行被校验的效果 ,这不是我们工作想要的效果.如图: 问题分析:因 ...

  7. 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)

    如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...

  8. 解决inline-block属性带来的标签间间隙问题

    1.给inline-block元素设置一个父元素. 设置父元素的font-size:0:.子元素font-size设置成合适大小,如果不设置子元素font-size,子元素会继承父元素的0: 2.给i ...

  9. iOS开发解决 jsonModel 属性跟系统的重复

    -(id)initWithDic:(NSDictionary *)dic { if (self = [super init]) { [self setValuesForKeysWithDictiona ...

随机推荐

  1. SecureCRT 专题

    SecureCRT在同一窗口打开多个标签:选中“在标签页中打开”即可 SecureCRT同时向多个tab窗口发送相同的命令 Step by step: 作为管理N台服务器,而又要执行相同命令又不想用脚 ...

  2. 百度地图API二：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图

    原文:百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/liusaint1992/ ...

  3. Fiddler教程（Web调试工具）

    转载地址:写得很不错的fildder教程   http://kb.cnblogs.com/page/130367/ Fiddler的基本介绍 Fiddler的官方网站:  www.fiddler2.c ...

  4. symfony中doctrine常用属性

    转 http://docs.doctrine-project.org/projects/doctrine-orm/en/latest/reference/basic-mapping.html 1. d ...

  5. MultiBinding

    <StackPanel> <Slider x:Name="sl1" Minimum="10" Maximum="100"/ ...

  6. WPF 控件的内容属性

    WPF的内容属性不应定都是content, 例如TextBlock的内容属性是Text Panel的内容属性是Children ListBox的内容属性是Items

  7. liunx 常用操作命令

    1.复制粘贴命令:在一行的任何位置按下yy,y是yanked拷贝的意思,然后去想粘贴的位置按下p即可.p是粘贴的意思. 2.如果想复制3行的话,按下3yy,就复制3行,如果想复制多行的话,直接按数字可 ...

  8. Win8Metro(C#)数字图像处理--2.22二值图像膨胀

    原文:Win8Metro(C#)数字图像处理--2.22二值图像膨胀  [函数名称] 二值图像膨胀函数DilationProcess(WriteableBitmap src) [算法说明]  膨胀 ...

  9. ARTS 1.7 - 1.11

    每周一个 Algorithm,Review 一篇英文文章,总结一个工作中的技术 Tip,以及 Share 一个传递价值观的东西! Algorithm: 学习算法 题目: https://leetcod ...

  10. mysql三种修改密码的方式

    [root@MySQL ~]# mysqladmin -uroot -proot -S /data/3307/mysql.sock password '123'; 其中-p是现在的密码,passwor ...