JS禁用浏览器退格键实现思路及代码
2024-08-26 00:25:35
[From] http://www.jb51.net/article/42562.htm
上周提交了一个项目(内部使用的),一同事提出个BUG,说要禁用退格键(backspace或者叫后退键),因为这和他的习惯不一样,担心万一文字录入一半,他按了退格键,那整个页面的内容就白填了,然后信誓旦旦的说他做的系统中后退键都是不能用的,我这个系统有问题,当时因为事多,只把这个问题记录下来了,后来查了下他以前做的项目,也没有对退格键进行处理。自己的项目都没处理,到我这嚷嚷来了,算了,不和年轻人一般见识。不就禁用个后退键,简单。
其实说禁用也不是完全禁用,后退键在各浏览器下默认为点击了一下后退按钮,只要保证正常的文字录入还可以用,其他情况下的退格键一律禁掉。看代码吧。
当键盘敲下后退键(Backspace)后
1、禁止浏览器自动后退
2、但不影响密码、单行文本、多行文本输入框等的回退操作
解决方案:
网上搜了一下,发现有不少解决方案,相比较之下,zywang的方案较佳
在其基础上,进行补充和完善,以满足需求,整理后的代码如下:
代码一、核心代码
function forbidBackSpace(e) {
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) return false;
}
//禁止后退键 作用于Firefox、Opera
// document.onkeypress = forbidBackSpace;
//禁止后退键 作用于IE、Chrome
document.onkeydown = forbidBackSpace;
代码二、
function bindBackEvent() { //防止退格键
$(document).keydown(function(e){
e = window.event || e;
var code = e.keyCode || e.which;
if (code == 8) {
var src = e.srcElement || e.target;
var tag = src.tagName;
if (tag != "INPUT" && tag != "TEXTAREA") {
e.returnValue = false;
return false;
} else if ((tag == "INPUT" || tag == "TEXTAREA") && src.readOnly == true) {
e.returnValue = false;
return false;
}
}
});
}
最新文章
- 使用GizwitsOpenAPI,快速开发轻应用
- yourphp问题中心
- C语言中如何将二维数组作为函数的参数传递
- ffmpeg常用命令
- [转载]AxureRP 7.0部件详解(一)
- POJ3308 Paratroopers(网络流)(最小割)
- Viewport Resizer下载 谷歌前端自适应开发工具
- DOS 命令 attrib:修改文件属性
- XMLHttpRequest2的进步之处
- 学习javascript中this用法的一些感悟
- 解压tomcat后一闪而过的问题
- StackExchange.Redis 使用 (一)
- C++ do while 0 使用和含义
- TWaver 2D+GIS+3D的试用和在线Demo
- 基于编辑距离来判断词语相似度方法(scala版)
- MYSQL GTID position
- 洗礼灵魂,修炼python(80)--全栈项目实战篇(8)—— 计算器
- Oracle 18C DBCA建库报ora-01012错误
- java中自己常犯的错误汇总
- spring mvc context-param init-param 区别
热门文章
- Django----配置数据库读写分离
- Java基础语法(二)<;运算符>;
- The Difference Between @Helpers and @Functions In WebMatrix
- UVa 1625 Color Length (DP)
- txt文本怎么去除重复项
- windows phone制作引导页
- c++多线程基础3(mutex)
- 洛谷P2764 最小路径覆盖问题(最大流)
- DOM操作技术之动态脚本与动态样式(兼容版)
- Python之路Python全局变量与局部变量、函数多层嵌套、函数递归