jQuery_点击按钮锁定屏幕

为解决用户在自助设备上因未收到即时反馈而多次点击按钮的问题,本文介绍了一种通过创建透明div层来锁定屏幕的方法,以防止用户在处理过程中进行连续提交。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

公司最近做设备软件,发现用户使用自助设备(类似提款机)时点击按钮之后,发现没反应(其实正在与后台交互),就继续按,结果提交了很多次,老项目了,的确不够人性化,我给加了一个提示,点击后创建一层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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值