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=" ...
随机推荐
- rapidPHP 1.1.0 介绍
RapidPHP介绍 RapidPHP本着免费开源.快速.高效.简单的面向对象的 轻量级PHP开发框架. 版本: 1.1.0 官网: rapidPHP.gx521.cc 作者: 954418992@q ...
- apache安装过程中的常见问题
1. 问题"curses.h: No such file or directory" /home/mediawiki/cmake-2.8.12/Source/CursesDialo ...
- 如何使用python生成xml
最近要用python生成一个xml格式的文件.因为有一些内容是中文,原来的xml文件中使用了CDATA 的部分. 而之前的python程序所用的库中没有 创建这个区域的方法.无奈研究了大半天. 最后用 ...
- webUI自动化测试框架---”pyswat“介绍
webUI自动化测试框架---"pyswat"介绍 大家好我是lamecho 辣么丑,今天给大家介绍一款web自动化测试框架pyswat. "pyswat"是 ...
- poj1159二维树状数组
Suppose that the fourth generation mobile phone base stations in the Tampere area operate as follows ...
- Docker 打包 部署
Docker 打包 部署 一贯的开场白,大家好: 开始学习Spring Boot ,同时也再学习 Maven 自动化构建. 项目的部署环境是 Linux 服务器,Docker容器. 之所以写这篇博客 ...
- Linux文件属性及如何修改文件属性
ls -al:显示文件的文件名与相关属性并列出所有文件详细的权限与属性 dr-xr-x---. 7 root root 4096 Apr3 12:31 ...
- JAVA中的Buffer
一.属性 Buffer有四个基本属性: 1.capacity 容量,buffer能够容纳的最大元素数目,在Buffer创建时设定并不能更改 2.limit buffer中有效位置数目,不能对超过li ...
- bootstrap实例 之 响应式表格-----2017-05-15
Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机,现在就bootstrap的响应式举一个例子: 如上图所示,要实现该表格在手机等移动端上只显示代号.名称.和价格,其他以查看详情 ...
- git使用命令总结
直接安装git.exegit -- version 查看当前git版本进入要创建库的文件夹 shift+右键 弹出 powerShell 弹出命令窗口 git init 初始化git管理仓库 出现一个 ...