首页 web前端 js教程 javascript阻止浏览器后退事件防止误操作清空表单_javascript技巧

javascript阻止浏览器后退事件防止误操作清空表单_javascript技巧

May 16, 2016 pm 05:12 PM
javascript 浏览器

由于客户大多数是不懂电脑的大菜鸟。所以误操作比较多,有时没有选中文本框,然后不小心按了退格之后,刚刚辛苦填好的表单就什么也后退的没有了。网上查了好多资料,然后整合了一下。分享给大家。也希望酸奶姐姐来看看我的第一篇技术博客。呵呵(别介意我提到了你哦。)。废话不多说。上源码。

复制代码 代码如下:

$(function(){
//处理键盘事件 禁止后退键(Backspace)密码或单行、多行文本框除外
function banBackSpace(e){
var ev = e || window.event;//获取event对象
var obj = ev.target || ev.srcElement;//获取事件源

var t = obj.type || obj.getAttribute('type');//获取事件源类型

//获取作为判断条件的事件类型
var vReadOnly = obj.getAttribute('readonly');
var vEnabled = obj.getAttribute('enabled');
//处理null值情况
vReadOnly = (vReadOnly == null) ? false : true;
vEnabled = (vEnabled == null) ? true : vEnabled;

//当敲Backspace键时,事件源类型为密码或单行、多行文本的,
//并且readonly属性为true或enabled属性为false的,则退格键失效
var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea")
&& (vReadOnly || vEnabled!=true))?true:false;

//当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效
var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea")
?true:false;

//判断
if(flag2){
return false;
}
if(flag1){
return false;
}
}

//禁止后退键 作用于Firefox、Opera
document.onkeypress=banBackSpace;
//禁止后退键 作用于IE、Chrome
document.onkeydown=banBackSpace;
window.history.forward(1);//屏蔽浏览器自带的后退键
})

需要注意的地方是:

这段代码一定要放到初始化方法中。然后用document.onkeypress=banBackSpace去调用自己写的方法。
复制代码 代码如下:

vReadOnly = (vReadOnly == null) ? false : true;对于这段代码,原来冒号后面是vReadOnly这个值,后来发现在我项目中它返回空,不是null于是改成了true。

按照上面方法即可实现在非text,password,textare时按退格阻止浏览器后退事件,但是不会阻止在文本框有值时的退格事件。这是我的第一篇博客,希望各位多多捧场。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1672
14
CakePHP 教程
1428
52
Laravel 教程
1332
25
PHP教程
1276
29
C# 教程
1256
24
欧易交易所app官网下载苹果手机下载 欧易交易所app官网下载苹果手机下载 Apr 28, 2025 pm 06:57 PM

欧易交易所app支持苹果手机下载,访问官网,点击“苹果手机”选项,在App Store中获取并安装,注册或登录后即可进行加密货币交易。

芝麻开门官网入口 芝麻开门官方最新入口2025 芝麻开门官网入口 芝麻开门官方最新入口2025 Apr 28, 2025 pm 07:51 PM

芝麻开门是重点加密货币交易的平台,用户可以通过官方网站或社交媒体获取入口,确保访问时验证SSL证书和网站内容的真实性。

欧易官网入口 欧易官方最新入口2025 欧易官网入口 欧易官方最新入口2025 Apr 28, 2025 pm 07:48 PM

选择可靠的交易平台如欧易(OKEx),确保访问官方入口。

币安官网入口 币安官方最新入口2025 币安官网入口 币安官方最新入口2025 Apr 28, 2025 pm 07:54 PM

访问币安官网,并查看HTTPS和绿锁标志,避免钓鱼网站,官方应用也可安全访问。

在手机上使用原生select会遇到哪些问题? 在手机上使用原生select会遇到哪些问题? Apr 30, 2025 pm 03:06 PM

使用原生select在手机上的问题在移动设备上开发应用时,我们经常会遇到需要用户进行选择的场景。虽然原生sel...

Laravel 实时聊天应用:WebSocket 与 Pusher 结合 Laravel 实时聊天应用:WebSocket 与 Pusher 结合 Apr 30, 2025 pm 02:33 PM

在Laravel中构建实时聊天应用需要使用WebSocket和Pusher。具体步骤包括:1)在.env文件中配置Pusher信息;2)设置broadcasting.php文件中的广播驱动为Pusher;3)使用LaravelEcho订阅Pusher频道并监听事件;4)通过PusherAPI发送消息;5)实现私有频道和用户认证;6)进行性能优化和调试。

币安广场怎么样可靠吗 币安广场怎么样可靠吗 May 07, 2025 pm 07:18 PM

币安广场(Binance Square)是币安交易所提供的一个社交媒体平台,旨在为用户提供一个交流和分享加密货币相关信息的空间。本文将详细探讨币安广场的功能、可靠性以及用户体验,帮助你更好地了解这个平台。

安币官网多少 安币官网多少 Apr 28, 2025 pm 06:45 PM

安币的官方网站支持多种语言,提供新闻更新、技术文档和社区活动信息。用户可通过首页获取最新动态,访问FAQ、联系团队或社区论坛寻求帮助。

See all articles