解决IE8placeholder属性问题

<!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属性问题的更多相关文章

VS 错误解决(项目-属性-启用调试器)
我是先安装了VS2012, 之后由于需要安装了VS2008, 但在VS2012中可以运行程序但是不能调试, 即按Ctrl+F5可以运行, 但是按F5会提示错误. "尝试运行项目时出错:Unc ...
BootstrapValidator 解决多属性被同时校验问题
问题描述:在使用bootstrapValidator插件校验表单属性,当表单属性过多需要每行并列多个属性 ,会出现校验第一个属性,发现整行被校验的效果 ,这不是我们工作想要的效果.如图: 问题分析:因 ...
Java使用序列化的私有方法巧妙解决部分属性持久化问题
部分属性持久化问题看似很简单,只要把不需要的持久化的属性加上瞬态关键字(transient关键字)即可,没错,这也是一种解决方案,但在有的时候行不通,例如在一个计税系统和人力系统对接的时候,计税系统需 ...
解决opacity属性在低版本IE浏览器下失效的方法
以前,一直都以为ie9以下的版本不支持opacity属性.所以就同时使用 opacity和ie独特的filter蒙版.但是有些时候需要一些动态的效果,就比如层的渐渐消失,隐藏,就需要使用动态变化的op ...
周记3——解决fixed属性在ios软键盘弹出后失效的bug
这周在做空间(“类似”qq空间)项目.首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部.此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了.后来发现,ios绝大 ...
BootstrapValidator 解决多属性被同时校验问题《转》
问题描述:在使用bootstrapValidator插件校验表单属性,当表单属性过多需要每行并列多个属性 ,会出现校验第一个属性,发现整行被校验的效果 ,这不是我们工作想要的效果.如图: 问题分析:因 ...
如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)
如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...
解决inline-block属性带来的标签间间隙问题
1.给inline-block元素设置一个父元素. 设置父元素的font-size:0:.子元素font-size设置成合适大小,如果不设置子元素font-size,子元素会继承父元素的0: 2.给i ...
iOS开发解决 jsonModel 属性跟系统的重复
-(id)initWithDic:(NSDictionary *)dic { if (self = [super init]) { [self setValuesForKeysWithDictiona ...

随机推荐

监听WPF依赖属性
原文:监听WPF依赖属性当我们使用依赖属性的时候,有时需要监听它的变化,这在写自定义控件的时候十分有用, 下面介绍一种简单的方法. 如下使用DependencyPropertyDescripto ...
撑持4G LTE网络 OPPO R1S或在美出售
据外媒报导,OPPO R1S踪影近来出如今美国FCC官网上, 将撑持除T-Mobile之外其他运营商的LTE 4G网络.假如音讯事实,外型简洁美丽OPPO R1S将登入北美商场. 音讯称尽管当前还不晓 ...
《Linux Device Drivers》第十一章核心数据类型——note
基本介绍因为Linux多平台特性,不管是哪一个重要驱动力应该是便携与内核代码相关的核心问题应该是访问的同时是数据项的已知长度.能力和利用不同的处理器内核使用的数据类型主要分为三类类似int这种 ...
python 教程第十二章、标准库
第十二章. 标准库 See Python Manuals ? The Python Standard Library ? 1) sys模块 import sys if len(sys.argv) ...
Asp.net-MyFirstMVCProject详细解释
一个URL要求, ASP.NET MVC引擎将分析URL要使用Controller, 这个Controller(取而代之的是,真实的方法Controller的Action)从数据库或者其它数据源获取数 ...
JSON的一些要点总结专题
JavaScript Object Notation CSRF (pronounced sea-surf) 字面量(literal):字符串的意思和要表达的意思是一致的 JSON 是一种数据交换格式( ...
【推荐网站】下载国外网盘+强大的离线下载站—offcloud.com
博主在网上浏览时看到一篇帖子,推荐了一个离线下载网站–offcloud.com,支持上传种子文件.磁力链和几十家网盘的直连下载,厉害了我的哥,这是个啥网站这么666.即使之前咱们写了几篇文章来自建下载 ...
Selenium-actions
一.鼠标事件清单 1. 鼠标左键点击 Actions action = new Actions(driver);action.click();// 鼠标左键在当前停留的位置做单击操作 action. ...
x名称空间中的内容
原文:x名称空间中的内容 x名称空间映射的是http://schemas.microsoft.com/winfx/2006/xaml,它包含的类均与XAML的解析有关,下面分三部分介绍一:x名称空间 ...

解决IE8placeholder属性问题

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

随机推荐

热门专题