禁用backspace键的退回功能防止数据丢失

最新推荐文章于 2024-11-25 15:04:59 发布

转载最新推荐文章于 2024-11-25 15:04:59 发布 · 800 阅读

本文讨论了在使用笔记本录入数据时遇到的问题，即在删除错误内容时页面自动跳转导致数据丢失。文章提出了两种解决方案：通过JS弹窗提示用户确认是否保存数据后再进行页面跳转，或者禁用浏览器的后退功能以防止意外跳转。提供了相应的代码实现。

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

最近一直有编辑反馈后台录入的时候未保存自动页面跳转导致录入的数据丢失，经过详细询问发现编辑使用的是笔记本，录入时有错误的地方会按backspace（退格键）键删除错误的内容，但是经常按backspace（键格键）时页面经常自动转跳，由于未保存导致数据丢失。很明显数据丢失和backspace键有关，在这想到了backspace键在浏览器下是一个后退的功能键，默认情况下在浏览器没有输入焦点时按下是后退一页。

编辑在录入时删除错误内容时输入框丢失焦点再按退到的前一页发生跳转。

编辑使用的后台是我们自己开发的后台，在开发时考虑的不周导致，按正常来说在录入页面跳转时应该有个js弹窗提示数据未保存是否跳转，由于程序员的疏忽未添加这个功能，所以最好的处理办法就是添加修改表单未保存离开时用js弹窗提示就可以了，如下代码：

function 
formIsDirty(form) {
    for
(var 
i = 0; i < form.elements.length; i++) {
        var
element = form.elements[i];
        var
type = element.type;
        if
(type == "checkbox" 
|| type == "radio") {
            if
(element.checked != element.defaultChecked) {
                return
true;
            }
        }
        else
if (type == "hidden"
|| type == "password"
|| type == "text" 
|| type == "textarea") {
            if
(element.value != element.defaultValue) {
                return
true;
            }
        }
        else
if (type == "select-one"
|| type == "select-multiple") {
            for
(var 
j = 0; j < element.options.length; j++) {
                if
(element.options[j].selected != element.options[j].defaultSelected) {
                    return
true;
                }
            }
        }
    }
    return
false;
}
window.onbeforeunload =
function (e) {
    e = e || window.event;
    if
(formIsDirty(document.forms["someForm"])) {
        // IE 和 Firefox   
        if
(e) {
            e.returnValue =
"对不起，页面数据已做修改，尚未保存，确定要刷新或离开本页面？";
        }
        // Safari浏览器    
        return
"对不起，页面数据已做修改，尚未保存，确定要刷新或离开本页面？";
    }
};

如果感觉上面的代码麻烦可以直接禁用backspace的后退功能，如下面

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