键盘backspace导致浏览器回退解决办法

键盘backspace导致浏览器回退解决办法

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

原创

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

·

1.1k 阅读

·

2

·

1

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#计算机外设

#javascript

#开发语言

文章提供了一个JavaScript函数来处理浏览器的Backspace键事件，防止在非输入字段按backspace时导致页面回退。这个函数区分了不同类型的输入字段，允许在密码和文本输入框中正常使用退格键，但在其他情况下阻止页面回退，以避免数据丢失和用户体验问题。

针对一些浏览器backspace会导致页面回退的情况,是一些老版本的浏览器例如360或者chrome浏览器的低版本会有这种问题,尤其是在pc端页面有弹框的时候如果操作按到backspace导致页面回退,造成数据丢失等一系列体验问题,有如下处理办法

//utils.js

//页面加载完成获取到dom

export const preventBackspace = () => {

//禁止退格键 作用于Firefox、Opera

document.onkeypress = banBackSpace;

//禁止退格键 作用于IE、Chrome

document.onkeydown = banBackSpace;

}

//处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外

const banBackSpace = (e) => {

//alert(event.keyCode)

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)

event.returnValue = false;//这里如果写 return false 无法实现效果

}