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>
placeholder属性兼容ie8的更多相关文章
- input 的 placeholder属性在IE8下的兼容处理
placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...
- html5 placeholder属性兼容ie11
placeholder 属性是html5的属性,用于提供描述输入字段预期值的提示信息(hint). 简单例子: <!DOCTYPE HTML> <html> <body& ...
- HTML5表单提示placeholder属性兼容IE
placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...
- placeholder属性兼容js支持
$(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement('in ...
- （转）html5 Placeholder属性兼容IE6、7方法
使低版本浏览器支持Placeholder有很多方法,都不是很完美,或多或少有点问题,且有些原生支持的浏览器在获得焦点时会清空Placeholder提示.发现zhihu的解决方法不错,特记录下 wind ...
- css background-size 属性 兼容ie8 ie7 方案
<!-- background-size-polyfill v0.2.0 | (c) 2012-2013 Louis-Rémi Babé | MIT License --> <PUB ...
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能
当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...
- 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美
<完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...
- js解决IE8、9下placeholder的兼容问题
由于placeholder是html5的新属性,在IE8.IE9下是不能显示的,有兼容性问题. 解决思路: 1.判断目前浏览器是否支持placeholder属性 2.若不支持,则将type=" ...
随机推荐
- DFB系列 之 Clear清空surface缓存
1. 函数原型解析 函数声明: DFBResult Clear ( IDirectFBSurface * thiz, u8 r, u8 g, ...
- Mysql PHP
if(_mysql.query(sql.data()) < 0) 这里不能使用sql.c_str() 因为这个会有‘\0’而在Mysql查询中,这个0是不希望出现的.
- futex-based pthread_cond
pthread_cond的实现使用了几个futex来协同进行同步,以及如何来实现的. 假定你已经明白 futex,futex-requeue,以及 pthread lowlevellock. < ...
- django restframework serializer 增加自定义字段
在使用django restframework serializer 序列化在django中定义的model时,有时候我们需要额外在serializer中增加一些model中没有的字段.有两种方法实现 ...
- IOS中常用的UIColor
UIColor + (UIColor *)blackColor; // 0.0 white 黑色 + (UIColor *)darkGrayColor; // 0.333 white 深灰色 + (U ...
- [转载]PHP文件解压代码
来自开源中国:
- jquery与js实现全选功能的区别---2017-05-12
一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...
- 原生JS Ajax 请求
var username = document.getElementById('username').value; var password = document.getElementById('pa ...
- jar包和war包
Jar (Java archive), 是将实现了某功能的所有类及辅助资源用ZIP压缩形式打包而成的一个文件, 便于代码的管理和重复使用.当使用别人提供的jar时,只需要在classpath环境变量中 ...
- ArrayList源码解析（二）自动扩容机制与add操作
本篇主要分析ArrayList的自动扩容机制,add和remove的相关方法. 作为一个list,add和remove操作自然是必须的. 前面说过,ArrayList底层是使用Object数组实现的. ...