禁用返回键

 

document.documentElement.onkeydown = function (evt) {


//获取事件对象 
var elem = event.relatedTarget || event.srcElement || event.target || event.currentTarget;

if (event.keyCode == 8) {//判断按键为backSpace键

//获取按键按下时光标做指向的element 
var elem = event.srcElement || event.currentTarget;

//判断是否需要阻止按下键盘的事件默认传递 
var name = elem.nodeName;

if (name != 'INPUT' && name != 'TEXTAREA') {
return _stopIt(event);
}
var type_e = elem.type.toUpperCase();
if (name == 'INPUT' && (type_e != 'TEXT' && type_e != 'TEXTAREA' && type_e != 'PASSWORD' && type_e != 'FILE')) {
return _stopIt(event);
}
if (name == 'INPUT' && (elem.readOnly == true || elem.disabled == true)) {
return _stopIt(event);
}
}

 

}
function _stopIt(e) {
if (e.returnValue) {
e.returnValue = false;
}
if (e.preventDefault) {
e.preventDefault();
}

return false;
}

  

 

转载于:https://www.cnblogs.com/zhang9418hn/p/3670023.html

在使用 Vue 开发 H5 应用时,若需要禁用手机系统的返回功能,通常可以通过监听 `popstate` 事件并重写其行为来实现。`popstate` 事件会在浏览器的历史记录发生变化时触发,例如用户点击了返回按钮或调用了 `history.back()` 方法。 以下是一个常见的实现方式: ```javascript // 在 Vue 组件的 mounted 钩子中添加 mounted() { // 首次加载时推入一个历史记录 history.pushState(null, null, document.URL); // 监听 popstate 事件 window.addEventListener('popstate', this.handlePopState); }, methods: { handlePopState() { // 再次推入历史记录以阻止返回 history.pushState(null, null, document.URL); // 可以选择在此处执行其他逻辑,例如提示用户不能返回 // alert('无法返回,请使用页面内的导航'); } }, beforeDestroy() { // 组件销毁前移除事件监听器 window.removeEventListener('popstate', this.handlePopState); } ``` 上述代码通过 `history.pushState` 在用户尝试返回时不断推入当前 URL 的新历史记录,从而阻止浏览器执行真正的返回操作。这种方式适用于需要临时禁用返回的场景,例如在表单填写过程中防止用户误操作导致数据丢失。 需要注意的是,这种方法并不能完全“禁用返回,而是通过不断添加新的历史记录来欺骗浏览器。因此,它在某些浏览器或设备上可能表现不一致[^3]。此外,过度使用此类技术可能会对用户体验造成负面影响,建议仅在必要的情况下使用。 --- ### 相关问题 1. 如何在 Vue 中实现页面加载时自动滚动到指定位置? 2. Vue 开发 H5 页面时如何适配不同分辨率的手机屏幕? 3. 如何在 Vue H5 页面中实现微信授权登录? 4. 在 Vue 中如何实现页面切换时的动画效果? 5. Vue H5 页面如何优化首屏加载速度?
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值