<!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. windows Hook 消息分类

    调用SetWindowsHookEx的DLL的模块实例句柄,它可以经由DllMain入口的第一个参数得到.HHOOK SetWindowsHookEx( int idHook,HOOKPROC lpf ...

  2. Hermite曲线插值

    原文 Hermite Curve Interpolation Hermite Curve Interpolation Hamburg (Germany), the 30th March 1998. W ...

  3. 【C#】使用EF访问Sqlite数据库

    原文:[C#]使用EF访问Sqlite数据库 1. 先上Nuget下载对应的包 如图,搜索System.Data.SQLite下载安装即可,下载完之后带上依赖一共有这么几个: EntityFramew ...

  4. C# Windows服务以指定用户运行

    参考一下 https://bbs.csdn.net/topics/330151879 服务程序以Local System安装运行没问题,但用这个账户运行的服务无法访问局域网共享资源,比较麻烦,所以想指 ...

  5. DSP Builder 12.0安装及crack方法

    在安装dsp_builder之前请确保已安装所需要的matlab版本 在此之前我已经安装了matlab R2011a,下面安装dsp builder 下面就是破解了,因为12.0的版本刚出,还没有相应 ...

  6. Win10《芒果TV》商店版更新v3.2.6：修复后台任务故障，优化推送频次

    2017湖南卫视大型音乐竞技节目<歌手>,2017年1月21日晚首播第一期,7位歌手惊艳亮嗓,<芒果TV>UWP版迅速更新v3.2.6版,主要是修复后台任务故障,优化推送频次, ...

  7. Win10《芒果TV》商店版更新v3.1.4.0：适配Xbox手柄B键后退、手机支持暗色主题不伤眼

    在双十一全球剁手节.光棍节欢庆之际,<芒果TV>UWP版迅速更新v3.1.4版,适配Xbox手柄B键全局后退,支持手机切换暗色主题,优化并解决启动卡顿等问题. 芒果TV UWP V3.1. ...

  8. centos 7 安装 git 2.22.0

    1.安装所需软件包 yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel yum install gcc ...

  9. Tensorflow数据读取机制

    展示如何将数据输入到计算图中 Dataset可以看作是相同类型"元素"的有序列表,在实际使用时,单个元素可以是向量.字符串.图片甚至是tuple或dict. 数据集对象实例化: d ...

  10. ML:吴恩达 机器学习 课程笔记(Week9~10)

    Anomaly Detection Recommender Systems Large Scale Machine Learning