记录:asp.net mvc 中 使用 jquery 实现html5 实现placeholder 密码框 提示兼容password IE6

@{ViewBag.Title = "完美结合";}

<script>var G_start_time = new Date;</script>

<!--[if (lt IE 8.0)]><link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/login/css/index.src_datauri.css")"><![endif]--><!--[if (!IE)|(gte IE 8.0)]><!--><link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/login/css/index.src_datauri.css")"><!--<![endif]-->

<script type="text/javascript" src="@Url.Content("~/Content/login/js/jquery-1.4.2.min.js")"></script>

<style type="text/css">
<!--
body {
	background-color: #f0f0f0;
}
-->

#loginSubmit .submit input:hover{background-color:#26B30F};
#login .submit input:hover{background-position:0 -69px};
#loginSubmit .submit input:hover{background-position:0 -69px};
/* 设置提示文字颜色 */
::-webkit-input-placeholder {
color: #838383;
}
:-moz-placeholder {
color: #838383;
}
.placeholder {
color: #ccc;
}

</style>

<script type="text/javascript">
//判断浏览器是否支持 placeholder属性
function isPlaceholder(){
	var input = document.createElement(‘input‘);
	return ‘placeholder‘ in input;
}
if (!isPlaceholder()) {//不支持placeholder 用jquery来完成
	$(document).ready(function() {
	    if(!isPlaceholder()){
	        $("input").not("input[type=‘password‘]").each(//把input绑定事件 排除password框
	            function(){
	                if($(this).val()=="" && $(this).attr("placeholder")!=""){
	                    $(this).val($(this).attr("placeholder"));
	                    $(this).focus(function(){
	                        if($(this).val()==$(this).attr("placeholder")) $(this).val("");
	                    });
	                    $(this).blur(function(){
	                        if($(this).val()=="") $(this).val($(this).attr("placeholder"));
	                    });
	                }
	        });
	        //对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
	        var pwdField	= $("input[type=password]");
	        var pwdVal		= pwdField.attr(‘placeholder‘);
	        pwdField.after(‘<input id="pwdPlaceholder" type="text" value=‘+pwdVal+‘ class="ipt tipinput1" autocomplete="off" />‘);
	        var pwdPlaceholder = $(‘#pwdPlaceholder‘);
	        pwdPlaceholder.show();
	        pwdField.hide();
	        pwdPlaceholder.focus(function(){
	        	pwdPlaceholder.hide();
	        	pwdField.show();
	        	pwdField.focus();
	        });
	        pwdField.blur(function(){
	        	if(pwdField.val() == ‘‘) {
	        		pwdPlaceholder.show();
	        		pwdField.hide();
	        	}
	        });

	    }
	});
}
</script>

</head>

<body  >

<script>if(top !== self){
		top.location = location.href;
	}

	var startTime = new Date(),
		loginInitTime;</script>

<div class="slide-wrap">
<div class="container">
<div class="slide-box">
<div class="slide"></div>
</div>
<div class="slide-point-box">
<span class="cur-point" data-index="0">@ViewData["msg"]</span>
<span data-index="1" style="color:red;"></span></div>
<div class="login-panel" >
<form name="form1" id="form1" method="post"  action="@Url.Action("SignIn")">
<h1>预录助手网页版登录</h1>
<div id="login"><div id="modLoginWrap" class="mod-qiuser-pop"><iframe style="display:none" name="loginiframe"></iframe>
<form id="loginForm" method="post" target="loginiframe" onSubmit="QHPass.loginUtils.submit();return false;">
<dl class="login-wrap"><dt>
<span id="loginTitle">
</span>
<div id="infobarNoCookie" class="noCookie">浏览器已禁止设置cookie,无法正常登录,请<a href="" target="_blank"> 启用cookie </a>?</div>
</dt>
<dd class="global-tips">
<div id="error_tips" class="" >@ViewData["msg"]</div></dd><!--登录错误提示 -->
<dd><div class="quc-clearfix login-item">
<label for="loginAccount">帐号</label>
<span class="input-bg">
<input name="userName" id="userName" type="text" class="ipt tipinput1" size="20" placeholder="请输入用户名" value="@Model.name" /></span>
<b class="tips-wrong icon-loginAccount"></b>
<span id="tips-loginAccount" class="tips-msg "></span>
</div>
</dd>
<dd class="password">
<div class="quc-clearfix login-item">
<label for="lpassword">密码</label>
<span class="input-bg">
<input name="password" id="password" type="password" class="ipt tipinput1" size="20"  placeholder="请输入密码" value="@Model.password"  />
</span>
<b class="tips-wrong icon-lpassword"></b>
<span id="tips-lpassword" class="tips-msg">
</span></div></dd>
<!--记住密码 -->
<dd class="find"><label for="iskeepalive"><input type="checkbox" name="isSavePWD" value="1" @(Model.isSavePWD == "1" ? "checked " : " ") /> 记住密码</label><a href="http://i." target="_blank" class="fac" id="findPwd">忘记密码?</a></dd>
<!--记住密码 -->
<dd class="submit"><span><a class="input_btn" href="javascript:form1.submit();">登录</a></span></dd>
<div class="change">
</form>
</div>

</div>
</div>
</div>

</body>
</html>

  参考网址:

  http://myfreespace.iteye.com/blog/1659450

http://kongcodecenter.iteye.com/blog/1305551

http://blog.163.com/front_end1205/blog/static/2143711382013101154419375/

http://blog.csdn.net/dyllove98/article/details/8860447

http://blog.csdn.net/trace332/article/details/6424444

https://github.com/jamesallardice/Placeholders.js/issues

http://lidrema.blog.163.com/blog/static/209702148201305101844932/

http://www.2cto.com/kf/201308/239953.html

http://blog.csdn.net/cui_angel/article/details/7790377

时间: 2024-11-05 22:22:38

记录:asp.net mvc 中 使用 jquery 实现html5 实现placeholder 密码框 提示兼容password IE6的相关文章

asp.net mvc中使用jquery H5省市县三级地区选择控件

地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp.net mvc中使用jquery H5省市县三级地区选择控件及中国省市县标准地区库下载地址 咨询QQ:806693619 一.实现原理 一般常用输入控件是input,当点击input的时候执行jquery获取焦点事情,然后弹出本地区选择插件,选择完地区后点击确定将选择的值返回给input完成地区输入

在ASP.NET MVC中使用jQuery的Load方法加载静态页面的一个注意点

使用使用jQuery的Load方法可以加载静态页面,本篇就在ASP.NET MVC下实现. Model先行: public class Article { public int Id { get; set; } public string Url { get; set; } } 在HomeController中的Index方法,向视图传递一个Article强类型. public class HomeController : Controller { public ActionResult Ind

在ASP.NET MVC中使用typeahead.js支持预先输入,即智能提示

使用typeahead.js可以实现预先输入,即智能提示,本篇在ASP.NET MVC下实现.实现效果如下: 首先是有关城市的模型. public class City { public int Id { get; set; } public string Name { get; set; } public string PinYin { get; set; } } 在HomeController中响应前端请求返回有关City的json数据. public ActionResult GetCit

ASP.NET MVC中使用jQuery时的浏览器缓存问题

介绍 虽然jQuery在浏览器ajax调用的时候对缓存提供了非常好的支持,还是有必要了解一下怎样高效地使用http协议. 首先要做的事情是在server端支持HTTP GET,定义不同的URL输出不同的数据(MVC里相应的就是action). 假设要使用同一个地址获取不同的数据,那就不正确了.一个HTTP POST也不行由于POST不能被缓存.很多开发者使用POST主要有2个原因:明白了数据不能被缓存,或者是避免JSON攻击(JSON返回数组的时候能够被入侵). 缓存解释 jQuery全局对象里

ASP.NET MVC中jQuery与angularjs混合应用传参并绑定数据

要求是这样子的,在一个列表页中,用户点击详细铵钮,带记录的主键值至另一页.在另一外页中,获取记录数据,然后显示此记录数据在网页上. 先用动图演示: 昨天有分享为ng-click传递参数 <angularjs为ng-click事件传递参数>http://www.cnblogs.com/insus/p/7017737.html 上面仅仅是在ng-click传入一个值,但是在ASP.NET MVC中,还需要把这个值传至另外一个视图中<ASP.NET MVC传递参数(model)>http

ASP.NET MVC中Log4Net记录错误日志的使用

第一.在管理NuGet程序包 =>下载 Log4Net 第二.在web.config配置Log4Net 1:在<configuration>节点下 <configSections>节点中 配置log4Net节点引用. <!--log4net日志记录--> <section name="log4net" type="log4net.Config.Log4NetConfigurationSectionHandler, log4net

Asp.Net MVC中使用ACE模板之Jqgrid

第一次看到ACE模板,有种感动,有种相见恨晚的感觉,于是迅速来研究.它本身是基于bootstrap和jqueryui,但更nice,整合之后为后台开发节省了大量时间. 发现虽然不是完美,整体效果还是不错,特此分享给园友.这一节先讲其中的Jqgrid.按照国际惯例,先上两张图. 集成了button,form,treeview以及日历,时间轴.chart等控件,非常丰富.下面是Jqgrid在MVC中的使用. jqgrid的加载,排序,查找都是基于后台方法,不是在内存中完成,但也有一些小坑.下面一一道

在ASP.NET MVC中以post方式传递数组参数的示例

最近在工作中用到了在ASP.NET MVC中以post方式传递数组参数的情况,记录下来,以供参考. 一.准备参数对象 在本例中,我会传递两个数组参数:一个字符串数组,一个自定义对象数组.这个自定义对象UserInfo定义如下: public class UserInfo { public int UserId { get; set; } public string UserName { get; set; } } 二.后台代码 后台Action代码如下: [HttpPost] public Ac

在 Asp.NET MVC 中使用 SignalR 实现推送功能 [转]

在 Asp.NET MVC 中使用 SignalR 实现推送功能 罗朝辉 ( http://blog.csdn.net/kesalin ) CC许可,转载请注明出处 一,简介 Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重新发送请求或使用轮询技术来获取消息. 可访问其官方网站:https://github.com/SignalR/ 获取更多资讯. 二,实现机制