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=" ...
随机推荐
- bootstrap快速入门笔记（七）-表格,表单
一,表格 1,<table>中加.table类 2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式. **跨浏览器兼容性: ...
- html自定义调控
为什么需要自定义数据属性? 很多时候我们需要存储一些与不同DOM元素相关联的信息.这些信息对于读者来说可能是不需要的,但是可以轻松的访问这些信息将会给我们开发者的工作带来极大的便利. 例如,假设你有一 ...
- ashMap源码阅读与解析
目录结构 导入语 HashMap构造方法 put()方法解析 addEntry()方法解析 get()方法解析 remove()解析 HashMap如何进行遍历 导入语 HashMap是我们最常见也是 ...
- 内存管理之slab分配器
基本思想 与传统的内存管理模式相比, slab 缓存分配器提供了很多优点.首先,内核通常依赖于对小对象的分配,它们会在系统生命周期内进行无数次分配.slab 缓存分配器通过对类似大小的对象进行缓存而提 ...
- 不完全图解HTTP
在2D平面上行走的时候,认识只局限于“点”,刚认识一个新的点,就把之前的那个点忘记了,捡了芝麻丢西瓜.只从3D视角俯瞰时,把这些点连接在一起,点成线,线成面时,才能有所顿悟.话不多说,这是我对HTTP ...
- postgres导入其他数据库数据
最近对postgres数据库进行深入研究,将原来项目中使用的sqlserver数据库中的数据表导入postgres,网上搜索postgres数据导入,除空间数据库可以通过PostGIS 2.0 Sha ...
- Log4j appender输出类型配置
Log4j官方的appender给出了一下几种实现 org.apache.log4j.ConsoleAppender(控制台), org.apache.log4j.FileAppender(文件), ...
- ST-4
1.(49-7)使用下面的方法printPrimes()完成后面的问题: (a)为printPrimes()方法画控制流图. (b)考虑测试用例t1=(n=3)和t2=(n=5).即使这些测试用例游历 ...
- Linux 定时任务详解
原文地址:http://edu.codepub.com/2011/0104/28518.php crond分为系统级定时和用户级定时,系统级定时主要编辑/etc/crontab,用户级定时主要利用 ...
- 从Python小白到第一个小游戏发布
1.安装必要的环境(附图两张) 直接下载安装程序,本人win10系统,根据电脑系统下载并安装对应的python.exe,安装路径可以选择D盘的,具体安装细节这里就不说了,不知道的可以留言或者找度娘 2 ...