JavaScript屏蔽Backspace与F5键的实现方案

作者:青柠时间:2026-10-22 20:53:52浏览:135

本文介绍如何在网页开发中通过JavaScript屏蔽Backspace(退格键)和F5(刷新键)。重点讲解如何区分输入框类型,避免误禁文本编辑,并提供兼容IE、Firefox和Chrome的完整代码实现,同时包含屏蔽F5及右键菜单的补充方案。

Backspace键屏蔽方案

完全屏蔽键盘操作并非绝对可靠,最佳实践是结合服务端逻辑共同实现。服务端可通过校验页面参数是否首次加载,若非首次则重定向至指定页面。此处仅介绍基于JavaScript的前端实现方法。

在实际项目开发中,常需通过JS禁用特定键盘按键,例如Backspace(退格键/后退键)。曾遇项目需在页面编辑时禁用该键,因其触发会导致页面后退,致使编辑内容丢失,造成不良体验。以下直接提供相关代码。

推荐一种处理键盘事件的代码,旨在禁止Backspace键触发页面后退,同时确保密码输入框及单行、多行文本框不受影响。


<script type="text/javascript"> 
 
//处理键盘事件 禁止后退键(Backspace)密码或单行、多行文本框除外 
function banBackSpace(e){  
 var ev = e || window.event;//获取event对象  
 var obj = ev.target || ev.srcElement;//获取事件源  
  
 var t = obj.type || obj.getAttribute('type');//获取事件源类型 
  
 //获取作为判断条件的事件类型 
 var vReadOnly = obj.getAttribute('readonly'); 
 var vEnabled = obj.getAttribute('enabled'); 
 //处理null值情况 
 vReadOnly = (vReadOnly == null) ? false : vReadOnly; 
 vEnabled = (vEnabled == null) ? true : vEnabled; 
  
 //当敲Backspace键时,事件源类型为密码或单行、多行文本的, 
 //并且readonly属性为true或enabled属性为false的,则退格键失效 
 var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") 
    && (vReadOnly==true || vEnabled!=true))?true:false; 
  
 //当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效 
 var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea") 
    ?true:false;   
  
 //判断 
 if(flag2){ 
  return false; 
 } 
 if(flag1){  
  return false;  
 }  
} 
 
//禁止后退键 作用于Firefox、Opera 
document.onkeypress=banBackSpace; 
//禁止后退键 作用于IE、Chrome 
document.onkeydown=banBackSpace; 
 
</script> 

使用方法:将上述JavaScript代码嵌入至HTML文档的<head>与</head>标签之间即可生效。

以下是其他开发者提供的补充代码方案。


<script type="text/javascript">
javascript:window.history.forward(1);//禁用回退(比如:当前在B页面,点击后退会退回到A页面,那么该代码写在A页面,然后在B页面就不会回退到A了)
</script>

<script type="text/javascript">
//禁止后退键 作用于Firefox、Opera 
document.onkeypress=banBackSpace;
//禁止后退键 作用于IE、Chrome 
document.onkeydown=banBackSpace;
//处理键盘事件 禁止后退键(Backspace)密码或单行、多行文本框除外 
function banBackSpace(e){ 
var ev = e || window.event;//获取event对象 
var obj = ev.target || ev.srcElement;//获取事件源 
var t = obj.type || obj.getAttribute('type');//获取事件源类型 
//获取作为判断条件的事件类型 
var vReadOnly = obj.getAttribute('readonly'); 
var vEnabled = obj.getAttribute('enabled'); 
//处理null值情况 
vReadOnly = (vReadOnly == null) ? false : vReadOnly; 
vEnabled = (vEnabled == null) ? true : vEnabled; 
//当敲Backspace键时,事件源类型为密码或单行、多行文本的, 
//并且readonly属性为true或enabled属性为false的,则退格键失效 
var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") && (vReadOnly==true || vEnabled!=true))?true:false; 
//当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效 
var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea") ?true:false; 
//判断 
if(flag2){ 
return false; 
} 
if(flag1){ 
return false; 
} 
} 

</script>

F5键屏蔽方案

针对F5刷新键的屏蔽实现。


<script type="text/javascript">
//屏蔽F5
document.onkeydown = function(e){
e = window.event || e;
var keycode = e.keyCode || e.which;
if(e.ctrlKey || e.altKey || e.shiftKey
|| keycode >= 112 && keycode <= 123){
if(window.event){// ie
try{e.keyCode = 0;}catch(e){}
e.returnValue = false;
}else{// ff
e.preventDefault();
}
}
}
//屏蔽右键
document.oncontextmenu = function(e){
return false;
}
</script>

本文介绍至此,供有相关需求的开发者参考。

作者最新文章