placeholder属性兼容ie8

<!doctype html>
<html>
 <head>
	<meta charset="utf-8" />
	<title>登陆框的制作</title>
	<script src="jquery-1.11.3.js"></script>
	<script src="jquery.cookie.js"></script>
	<script src="jquery.md5.js"></script>
	<style>
		*{
			padding:0;
			margin:0;
			list-style:none;
			font-style:normal;
			box-sizing:border-box;
			-webkit-box-sizing:border-box;
			-moz-box-sizing:border-box;
			-ms-box-sizing:border-box;
		}
		body{
			font-family:‘Microsoft Yahei‘,Arial;
			color:#5e5e5e;
		}
		h1,h2,h3,h4,h5,h6{
			font-size:14px;
			margin:0;
			padding:0;
		}
		table{
			border-collapse:collapse;
			border-spacing:none;
		}
		input{
			font-size:12px;
			outline:none;
			border:none;
			vertical-align:middle;
		}
		input:focus{
			outline:none;
		}
		a {
			 color: #808080;
			 cursor: pointer;
			outline: 0
		}

		a:hover, a:link, a:visited {
			text-decoration: none
		}
		.clearfix {
			display: inline-table;
			display: block;
			zoom: 1
		}

		.clearfix:after {
			clear: both;
		    content: ".";
		    display: block;
			height: 0;
			visibility: hidden
		}

		.clearfix:before, .clearfix:after {
			display: table;
			line-height: 0;
			content: "";
		}
		img{
			vertical-align:top;
		}

		/*登录框的样式*/
		body{
			width:100%;
			height:100%;
			background:#CFD7EB;
		}
		#login{
			width:445px;
			height:390px;
			background:#fff;
			margin:auto;
			position:absolute;
			top:0;
			left:0;
			bottom:0;
			right:0;
			padding:35px;
		}
		.loginTitle{
			height:24px;
			margin-bottom:9px;
		}
		.loginTitle>h1{
			font-size:20px;
			float:left;
			color:#3F4040;
		}
		.loginTitle>p{
			float:right;
			color:#85827D;
			padding-left:30px;
			background:url("go.png") no-repeat 0 0;
		}
		#loginForm{

		}
		#loginForm .loginInfo{
			height: 27px;
			margin: 10px auto;
			font-size: 14px;
			line-height: 27px;

		}
		#loginForm .loginInfo .loginInfoRm{
			color: #EB2C4F;
			background-color:#FFF6D2;
			padding-left: 5px;
		}
		#loginForm .loginInfo .loginInfoNp{
			color:#EB2C4F;
			background-color:#FFEBEB;
			padding-left: 5px;
		}
		#loginForm .loginDetail{
			height:34px;
			line-height:34px;
			width:375px;
			margin-bottom:16px;
		}
		#loginForm .loginDetail input{
			width:375px;
			height:34px;
			line-height:1;
			line-height:34px\9;
			border:1px solid #D0CCC7;
			padding-left:10px;
		}
		#loginForm .loginDetail input:focus{
			border:1px solid #e4393c;
		}
		#loginForm .code{
			/*vertical-align:top;*/
		}
		#loginForm .code input{
			width:160px;
			vertical-align:top;
			margin-right:10px;
		}
		#loginForm .code span.codeImg{
			display:inline-block;
			width:83px;
			height:34px;
		}
		#loginForm .code span.codeImg img{
			max-height:34px;
		}
		#loginForm .code>b{
			display:inline-block;
			font-size:10px;
			color:#ccc;
		}
		#loginForm .code>b i{
			display:inline-block;
			padding-left:5px;
			color:#0078D7;
			cursor:pointer;
		}
		.loginR{
			margin:5px 0px;
		}
		.loginRember{
			width:80px;
			display:inline-block;
			font-size:10px;
			float:left;
		}
		.loginNoRember{
			width:100px;
			display:inline-block;
			font-size:10px;
			float:right;
			text-align:right;
		}
		li.loginSubmit{
			margin-top:20px;
			height:40px;
			width:375px;

		}
		li.loginSubmit button{
			background:#C62630;
			border:none;
			height:40px;
			width:375px;
			color:#fff;
			font-weight:600;
			font-size:18px;
			cursor:pointer;
		}
		.none{
			display:none;
		}
	</style>
 </head>
 <body>
	<div id="login">
		<div class="loginTitle clearfix">
			<h1 class="userLogin">用户登录</h1>
			<p class="userRegister"><a href="#">去注册</a></p>
		</div>
		<div id="loginForm">
			<div class="loginInfo">
				<div class="loginInfoRm">公共场所不建议自动登陆,以防账号丢失!</div>
				<div class="loginInfoNp none"></div>
			</div>
			<ul class="loginContent">
				<li class="loginDetail">
					<input type="text" id="userName" size="20" maxlength="20" value="" placeholder="用户名/手机号" />
				</li>
				<li class="loginDetail">
					<input type="password" id="userPwd" size="20" maxlength="20" value="" placeholder="密码" />
				</li>
				<li class="loginDetail code">
					<input type="text" id="userCode" size="20" maxlength="6" value="" placeholder="验证码" />
					<span class="codeImg">
						<img src="https://www.phtfdata.com/web/checkCode/queryCheckCode.do?timestamp=1470897792364"  />
					</span>
					<b class="codeChange">看不清?<i onclick="queryCheckCode()">换一张</i></b>
				</li>
				<li class="loginR clearfix">
					<p class="loginRember">
						<input id="userRm" type="checkbox" checked />
						自动登录
					</p>
					<div class="loginNoRember"><a href="#">忘记密码?</a></div>
				</li>
				<li class="loginSubmit">
					<button id="submit" type="submit">登 录</button>
				</li>
			</ul>
		</div>
	</div>
	<script>
		//ie678兼容placeholder属性
		var placeholderJs={
			_check:function(){
				return ‘placeholder‘ in document.createElement("input");
			},
			init:function(){
				if(!this._check()){
					this.fix();
				}
			},
			fix:function(){
				$(":input[placeholder]").each(function(index,element){
					$(this).wrap($("<div style=‘float:left‘></div>").css({
						position:‘relative‘,
						zoom:‘1‘,
						margin:‘none‘,
						padding:‘none‘,
						background:‘none‘,
						border:‘none‘
					}));
					var tex=$(this).attr(‘placeholder‘);
					var holder=$("<span></span>").text(tex).css({
						position:‘absolute‘,
						left:‘10px‘,
						top:‘2px‘,
						height:$(this).outerHeight(true),
						lineHeight:$(this).outerHeight(true)+‘px‘,
					}).appendTo($(this).parent());
					$(this).focusin(function(e){
						holder.hide();
						$(this).css("border","1px solid #990302");
					}).focusout(function(e){
						if(!$(this).val()){
							holder.show();
							$(this).css("border","1px solid #b4b9bd");
						}
					});
					holder.click(function(e){
						holder.hide();
						$(this).siblings("input").focus();
					});
				});
			}
		};
		$(function(){
			placeholderJs.init();
		});
		//自动登录功能(记住用户名和密码)
		$(document).ready(function(){
			if($.cookie("userRm")==‘true‘){
				$("#userRm").attr("checked")=="checked";
				$("#userName").val()=$.cookie("username");
				$("#userPwd").val()=$.cookie("userpwd");
			}
		});
		$("#submit").click(function(){
			if($("userRm").attr("checked")){
				var userName=$("#userName").val();
				var userPwd=$("#userPwd").val();

				$.cookie("userRm",‘true‘,{expires:7});
				/*不加密的方法
				$.cookie(‘userName‘,userName,{expires:7});
				$.cookie(‘userPwd‘,userPwd,{expires:7});*/
				//加密的方法
				var b=new Base64();
				var name=b.encode(userName);
				var pwd=b.encode(userPwd);
				$.cookie(‘userName‘,name,{expires:7});
				$.cookie(‘userPwd‘,pwd,{expires:7});

			}else{
				$.cookie(‘userRm‘,‘false‘,{expires:-1});
				$.cookie(‘userName‘,‘‘,{expires:-1});
				$.cookie(‘userPwd‘,‘‘,{expires:-1});
			}
		});
		//点击自动登录,显示风险提示,取消自动登录,风险提示隐藏
		$("#userRm").click(function(){
			if(this.checked){
				$(".loginInfoRm").show();
				$(".loginInfoNp").hide();
			}else{
				$(".loginInfoRm").hide();
			}
		});

		//获取焦点清空密码和用户名
		function emptyLoginName(){
			if($("#loginName").val()=="请输入用户名"){
				$("loginName").val("");
			}
		}
		function emptyLoginPwd(){
			if($("#loginPwd").val()=="请输入密码"){
				$("#loginPwd").val("");
			}
		}
		//点击获得验证码的方法
		function queryCheckCode(){
			var srcImg=$(".codeImg img");
			var src=$(".codeImg img").attr("src");
			srcImg.attr("src",chgUrl(src));
		}
		function chgUrl(url){
			var timestamp=(new Date()).valueOf();
			var urlUrl=url.substring(0,56);
			if(url.indexOf("&")>=0){
				url=url+‘&tamp=‘+timestamp;
			}else{
				url=url+‘?timestamp=‘+timestamp;
			}
			return url;
		}
		//登录的验证方法,用到和后台交互,是否用户名已存在,由于没有写后台代码,暂时先不写交互
		$("#submit").click(function(){
			login();
			queryCheckCode();
		});
		function login(){
			var userName=$("#userName").val();
			var userPwd=$("#userPwd").val();
			var userCode=$("#userCode").val();
			//简单的进行验证
			if(userName.length==0){
				$(".loginInfoRm").hide();
				var msg=‘用户名不能为空‘;
				$(".loginInfoNp").text(msg);
				$(".loginInfoNp").show();
				return false;
			}else if(userPwd.length==0){
				$(".loginInfoRm").hide();
				var msg=‘密码不能为空‘;
				$(".loginInfoNp").text(msg);
				$(".loginInfoNp").show();
				return false;
			}else if(userPwd.length<6){
				$(".loginInfoRm").hide();
				var msg=‘密码不能小于6位‘;
				$(".loginInfoNp").text(msg);
				$(".loginInfoNp").show();
				return false;
			}else if(userCode.length==0){
				$(".loginInfoRm").hide();
				var msg=‘验证码不能为空‘;
				$(".loginInfoNp").text(msg);
				$(".loginInfoNp").show();
				return false;
			}
			//验证用户名是否存在,和后台进行交互,
		}
	</script>
 </body>
</html>

  

时间: 2024-11-06 13:15:19

placeholder属性兼容ie8的相关文章

input 的 placeholder属性在IE8下的兼容处理

placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿placeholder属性的样式,并给input 的value赋值placeholder属性的值 2. input的type属性是password的情况,用上面的方法处理提示语为密码文 处理思路: 新添加一个标签,模仿placeholder属性 直接上代码: css部分: 1 .input-item

兼容IE8以下浏览器input表单属性placeholder不能智能提示功能,以及使用jquery.validate.js表单验证插件的问题处理

当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.appName == "Microsoft Internet Explorer" && (navigator.appVersion.match(/7./i)=="7." || navigator.appVersion.match(/8./i)=="

改进《完美让IE兼容input placeholder属性的jquery实现》的不完美

<完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的解释: <input id="itxt" class="itext" type="text" title="这是一个文本框" value="点我输入内容" tabindex="1" m

input输入框的border-radius属性在IE8下的完美兼容

在工作中我们发现搜索框大部分都是有圆角的,为此作为经验不足的前端人员很容易就想到,给input标签添加border-radius属性不就解决了嘛.不错方法确实是这样,但是不要忘了border-radius是css3属性,IE8不兼容!!!那么问题来了,怎样在IE8下完美兼容呢? 网上有很多关于css3属性在IE8下兼容的方法,需要引入PIE.htc这个文件,相信很容易搜到并下载该文件,但是用上position:relative;behavoior:url(PIE.htc);后发现圆角是实现了,但

兼容ie10以下版本的placeholder属性

<script src="${ctx }/js/jquery.placeholder.js" type="text/javascript"></script> $(function() { $('input').placeholder();//兼容ie10下placeholder属性: }); js文件地址

js解决IE8、9下placeholder的兼容问题

由于placeholder是html5的新属性,在IE8.IE9下是不能显示的,有兼容性问题. 解决思路: 1.判断目前浏览器是否支持placeholder属性 2.若不支持,则将type="text"的input标签的value值设置为placeholder的值,模拟placeholder效果:若是type="password",则添加一个type="password"的input元素模拟. 代码: <div> <input

Html5的placeholder属性(IE兼容)

HTML5对Web Form做了很多增强,比方input新增的type类型.Form Validation等. Placeholder是HTML5新增的还有一个属性,当input或者textarea设置了该属性后.该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失.曾经要实现这效果都是用JavaScript来控制才干实现 , firefox.google chrome等表示对其支持 , 只有IE存在违和感啊! 比如:  <input id="t1" type

在IE8及以下的浏览器中,不支持placeholder属性的解决办法

以下代码解决了在IE8及以下浏览器中不支持placeholder属性. 原理:将placeholder的值作为内容写入控件,并添加控件事件来进行模拟. ;(function(){ if( !('placeholder' in document.createElement('input')) ){ // 匹配 除type=password以外所有input.textarea $('input[placeholder][type!=password],textarea[placeholder]').

在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doctype html> <html> <header> <meta charset="utf-8"> <title>placeholder</title> <style type="text/css"