backspace按键导致页面回退

问题

用户在录入资料时一不小心错按Backspace键，就会直接回退到是一个页面,尤其是在pc端页面有弹框的时候如果操作按到backspace导致页面回退,造成数据丢失等一系列体验问题

原因

Windows下的IE、FireFox和Chrome 52之前的浏览器，当焦点不在一个可编辑的元素上时，按Backspace键就会回退到上一个页面，按Shift+Backspace键则会前进到下一个页面。
而Chrome 52以后的浏览器则屏蔽了Backspace和Shift+Backspace的上述行为，而是采用Alt+Left实现回退和Alt+Right实现前进。(如果想恢复Backspace回退，则需要安装Go Back With Backspace的Extension才行。)
对于FireFox而言，我们可以设置Backspace和Shift+Backspace的行为。

解决方案

//页面加载完成获取到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 无法实现效果
}