当前位置: 代码迷 >> Web前端 >> jQuery_点击旋钮锁定屏幕
  详细解决方案

jQuery_点击旋钮锁定屏幕

热度:307   发布时间:2012-11-11 10:07:57.0
jQuery_点击按钮锁定屏幕

公司最近做设备软件,发现用户使用自助设备(类似提款机)时点击按钮之后,发现没反应(其实正在与后台交互),就继续按,结果提交了很多次,老项目了,的确不够人性化,我给加了一个提示,点击后创建一层div锁定屏幕,防止用户连续提交。

?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>点击锁定屏幕,只对IE有效</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=gbk">

		<link rel="stylesheet" type="text/css" href="./styles.css">
		<script type="text/javascript" src="jquery-1.4.2.js"></script>
		<script>
			function stopEvent(){
				event.returnValue=false;
			};
			
			//创建一层div,覆盖原有屏幕,锁定其他按键等
			function lockScreen(){

				//使用screen.width和height,容易产生超出窗口大小的滚动条,最好使用window的width
				//var w = screen.width;
				//var h = screen.height;

				var w = $(window).width();
				var h = $(window).height();
				var x = $(window).scrollLeft();
				var y = $(window).scrollTop();

				//创建一层div遮盖,大小是窗口大小
				$("<div>").css({
					position:"absolute",
					width:w,
					height:h,
					left:x,
					top:y,
					filter:"alpha(opacity=60)",
					"background-color":"#f0f8ff"
				}).html("正在处理,请稍等").appendTo("body").slideDown(200);
				
				//锁定所有按键
				document.onkeydown = function(){
					if(event.keyCode == 13){
						$("#d").slideUp(500);
					}
					if(event.keyCode == 17 || event.keyCode == 16){
						//ctrl,shift键有时无法使用event.keyCode=0;
					}else{
						event.keyCode=0;
					}
					event.returnValue=false; 
				};

				document.oncontextmenu = stopEvent;//屏蔽鼠标左右键、
				document.onselectstart = stopEvent;//无法选择文字
				document.ondragstart = stopEvent;//禁止鼠标在网页上拖动
				document.onsource = stopEvent;
				//屏蔽滚动条暂无
			}

		$(function(){
			$("#but").click(function(){
				lockScreen();
			});
		});
		</script>
	</head>

	<body>

	<input id="but" type="button" style="position:absolute;left:800px;top:expression(parseInt(document.body.scrollTop)+500);" value="我是按钮" />
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
	</body>
</html>