键盘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 无法实现效果
}