<!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. phpstorm 删除空行

    思路: 用正则把所有空行找到,然后一键全部替换. 步骤:首先把 Regex 打上勾ctrl+f 搜索框就填写正则规则:^\nctrl+r 匹配到所有空行之后,点击[Replace all]即可

  2. 新浪微博API OAuth1 Python3客户端

    #!/usr/local/bin/python3 # coding=gbk # http://www.cnblogs.com/txw1958/ # import os, io, sys, re, ti ...

  3. web开发中../、./、/的区别

    原文:web开发中../.././的区别 最近在业余时间慢慢玩起了网站开发,觉得挺有意思的.在开发过程中,老是分不清 ../.././三者之间的区别,也老是弄混,最后仔细搜索研究了一下,现在终于懂了. ...

  4. 更新EF（更新表 添加表…）

           

  5. mysql数据库编码、字段编码、表编码 专题

    CREATE DATABASE `mybatis-subject` /*!40100 DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_bin */ 其中的 ...

  6. WPF获取某控件的位置，也就是偏移量

    原文:WPF获取某控件的位置,也就是偏移量 此段示例在MSDN中可见.XAML代码如下: <Window xmlns="http://schemas.microsoft.com/win ...

  7. 数据绑定（六）使用XML数据作为Binding的Source

    原文:数据绑定(六)使用XML数据作为Binding的Source .NET Framework提供了两套处理XML数据的类库 1. 符合DOM标准的类库:包括XmlDocument.XmlEleme ...

  8. WPF，通过修改dataGrid的cell的style，改变选中行失去焦点时的颜色 4.0可用

    <Style TargetType="{x:Type DataGridCell}"> <Style.Triggers> <Trigger Proper ...

  9. 图像滤镜艺术---Wave滤镜

    原文:图像滤镜艺术---Wave滤镜 Wave Filter水波滤镜 水波滤镜是通过坐标变换来模拟水波效果,使图像呈现出水波的特效.这个滤镜有一个可调参数:水波的扭曲程度. 代码如下; //     ...

  10. Android零基础入门第27节：正确使用padding和margin

    原文:Android零基础入门第27节:正确使用padding和margin 前面两期我们学习了LinearLayout线性布局的方向.填充模型.权重和对齐,那么本期我们来学习LinearLayout ...