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=" ...
随机推荐
- 使用Express开发个人网站（一）
Express,基于Node.js平台,快速.开放.极简的 web 开发框架. Node的出现,让js有了运行在服务器端的可能,基于此的Express,可以快速,简单的搭建起一个服务器与个人网站. 安 ...
- php代码效率小常识
1, 尽量不要使用@来进行抑制错误,效率很低 2,能使用单引号时不要使用双引号 3,echo的效率比print要高,同时echo可以输出多个变量 4,使用include,require时候最好使用绝对 ...
- 关于vector push_back()与其他方式读取数据的效率对比
引言: 在读取大量数据(数组)时,使用vector会尽量保证不会炸空间(MLE),但是相比于scanf的读取方式会慢上不少.但到底效率相差有多大,我们将通过对比测试得到结果. 测试数据:利用srand ...
- 时间序列预测之--ARIMA模型
什么是 ARIMA模型 ARIMA模型的全称叫做自回归移动平均模型,全称是(ARIMA, Autoregressive Integrated Moving Average Model).也记作ARIM ...
- 添加Metasploit-payload到已有的Android项目中
metasploit在写这篇文章之前,笔者可以说是对java一窍不通,也从来没有写过什么Android应用,在几天的摸爬滚打中终于实现了最终的目的,就是在已有Apk源码的情况下,用了比较另类的方式,添 ...
- Jdk1.6 JUC源码解析(13)-LinkedBlockingQueue
功能简介: LinkedBlockingQueue是一种基于单向链表实现的有界的(可选的,不指定默认int最大值)阻塞队列.队列中的元素遵循先入先出 (FIFO)的规则.新元素插入到队列的尾部,从队列 ...
- CountDownLacth详解
一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 用给定的计数 初始化 CounDownLatch.由于调用了countDown() 方法,所以在当前计数到达零之 ...
- memcache 启动 failed to start
以为是 端口冲突,到注册表中直接改了memcache的注册表,还是启动不了.memcache运行不了,还能咋办,看防火墙有没有阻止程序运行呗 勾上,我的windows 上的memcache 就可以运行 ...
- C/s从文件（TXT）中读取数据插入数据库
流程: 1.当按钮单击时,弹出OpenFileDialog 2.判断后缀名是否合法 3.导入数据库 按钮事件中的代码: 1.判断用户是否选中文件. 2.判断用户选择的文件是否为txt //第一步,当按 ...
- 致DBA：为什么你经常犯错，是因为你做的功课不够
专职做DBA已经6年多的事件了,看同行.同事犯了太多的错误,自己也犯了非常多的错误.一路走来,感触非常深.然而绝大多数的错误其实都是很低级的错误.有的是因为不了解某个引擎的特性导致:有的是因为对线上环 ...