• 记录:asp.net mvc 中 使用 jquery 实现html5 实现placeholder 密码框 提示兼容password IE6


    @{ViewBag.Title = "完美结合";}
    
    <script>var G_start_time = new Date;</script>
    
    <!--[if (lt IE 8.0)]><link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/login/css/index.src_datauri.css")"><![endif]--><!--[if (!IE)|(gte IE 8.0)]><!--><link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/login/css/index.src_datauri.css")"><!--<![endif]-->
    
    <script type="text/javascript" src="@Url.Content("~/Content/login/js/jquery-1.4.2.min.js")"></script>
    
    
    <style type="text/css">
    <!--
    body {
    	background-color: #f0f0f0;
    }
    -->
    
    #loginSubmit .submit input:hover{background-color:#26B30F};
    #login .submit input:hover{background-position:0 -69px};
    #loginSubmit .submit input:hover{background-position:0 -69px};
    /* 设置提示文字颜色 */
    ::-webkit-input-placeholder {
    color: #838383;
    }
    :-moz-placeholder {
    color: #838383;
    }
    .placeholder {
    color: #ccc;
    }
    
    </style>
    
    <script type="text/javascript">
    //判断浏览器是否支持 placeholder属性
    function isPlaceholder(){
    	var input = document.createElement('input');
    	return 'placeholder' in input;
    }
    if (!isPlaceholder()) {//不支持placeholder 用jquery来完成
    	$(document).ready(function() {
    	    if(!isPlaceholder()){
    	        $("input").not("input[type='password']").each(//把input绑定事件 排除password框
    	            function(){
    	                if($(this).val()=="" && $(this).attr("placeholder")!=""){
    	                    $(this).val($(this).attr("placeholder"));
    	                    $(this).focus(function(){
    	                        if($(this).val()==$(this).attr("placeholder")) $(this).val("");
    	                    });
    	                    $(this).blur(function(){
    	                        if($(this).val()=="") $(this).val($(this).attr("placeholder"));
    	                    });
    	                }
    	        });
    	        //对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
    	        var pwdField	= $("input[type=password]");
    	        var pwdVal		= pwdField.attr('placeholder');
    	        pwdField.after('<input id="pwdPlaceholder" type="text" value='+pwdVal+' class="ipt tipinput1" autocomplete="off" />');
    	        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();
    	        	}
    	        });
    	        
    	    }
    	});
    }
    </script>
    
    </head>
    
    <body  >
    
    
    
    
    <script>if(top !== self){
    		top.location = location.href;
    	}
    
    	
    	var startTime = new Date(),
    		loginInitTime;</script>
    
    
    
    <div class="slide-wrap">
    <div class="container">
    <div class="slide-box">
    <div class="slide"></div>
    </div>
    <div class="slide-point-box">
    <span class="cur-point" data-index="0">@ViewData["msg"]</span>
    <span data-index="1" style="color:red;"></span></div>
    <div class="login-panel" >
    <form name="form1" id="form1" method="post"  action="@Url.Action("SignIn")">
    <h1>预录助手网页版登录</h1>
    <div id="login"><div id="modLoginWrap" class="mod-qiuser-pop"><iframe style="display:none" name="loginiframe"></iframe>
    <form id="loginForm" method="post" target="loginiframe" onSubmit="QHPass.loginUtils.submit();return false;"> 
    <dl class="login-wrap"><dt>
    <span id="loginTitle">
    </span>
    <div id="infobarNoCookie" class="noCookie">浏览器已禁止设置cookie,无法正常登录,请<a href="" target="_blank"> 启用cookie </a>?</div>
    </dt>
    <dd class="global-tips">
    <div id="error_tips" class="" >@ViewData["msg"]</div></dd><!--登录错误提示 -->
    <dd><div class="quc-clearfix login-item">
    <label for="loginAccount">帐号</label>
    <span class="input-bg">
    <input name="userName" id="userName" type="text" class="ipt tipinput1" size="20" placeholder="请输入用户名" value="@Model.name" /></span>
    <b class="tips-wrong icon-loginAccount"></b>
    <span id="tips-loginAccount" class="tips-msg "></span>
    </div>
    </dd>
    <dd class="password">
    <div class="quc-clearfix login-item">
    <label for="lpassword">密码</label>
    <span class="input-bg">
    <input name="password" id="password" type="password" class="ipt tipinput1" size="20"  placeholder="请输入密码" value="@Model.password"  />
    </span>
    <b class="tips-wrong icon-lpassword"></b>
    <span id="tips-lpassword" class="tips-msg">
    </span></div></dd>
    <!--记住密码 -->
    <dd class="find"><label for="iskeepalive"><input type="checkbox" name="isSavePWD" value="1" @(Model.isSavePWD == "1" ? "checked " : " ") /> 记住密码</label><a href="http://i." target="_blank" class="fac" id="findPwd">忘记密码?</a></dd>
    <!--记住密码 -->
    <dd class="submit"><span><a class="input_btn" href="javascript:form1.submit();">登录</a></span></dd>
    <div class="change">
    </form>
    </div>
    
    </div>
    </div>
    </div>
    
    
    
    </body>
    </html>
    

      参考网址:

      http://myfreespace.iteye.com/blog/1659450

    http://kongcodecenter.iteye.com/blog/1305551

    http://blog.163.com/front_end1205/blog/static/2143711382013101154419375/

    http://blog.csdn.net/dyllove98/article/details/8860447

    http://blog.csdn.net/trace332/article/details/6424444

    https://github.com/jamesallardice/Placeholders.js/issues

    http://lidrema.blog.163.com/blog/static/209702148201305101844932/

    http://www.2cto.com/kf/201308/239953.html

    http://blog.csdn.net/cui_angel/article/details/7790377

  • 相关阅读:
    Android应用程序资源的查找过程分析
    Android应用程序资源管理器(Asset Manager)的创建过程分析
    Android应用程序资源的编译和打包过程分析
    跨平台的高性能的C++通讯库
    函数memstr
    chrome必备插件
    01背包的优化问题
    高精度小结/。。。
    关于日期的计算问题。。。。。
    终于入手了01背包问题!!
  • 原文地址:https://www.cnblogs.com/zangdalei/p/4701814.html
Copyright © 2020-2023  润新知