javascript禁用Backspace退格键

今天有个新需求,要求在窗口中编辑的时候禁用掉退格键,因为退格键会发生页面后退的动作,编辑的时候非常不便.

在网上搜索了一下,有两种方法,最后决定采用这位仁兄的方法,见http://volunteer521.iteye.com/blog/830522,这是其根据第一种方法做的改良,但是发现还是存在bug,最后做解释!

这里容我多说几句,先说第一种方法:　原理是采用键盘监听,处理键盘事件,这里他的处理方法是将type="text" "password"及"textarea"的输入框以外的元素做了退格键的禁用.

javascript代码

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//处理键盘事件
functiondoKey(e){
varev = e || window.event;//获取event对象
varobj = ev.target || ev.srcElement;//获取事件源
vart = obj.type || obj.getAttribute('type');//获取事件源类型
if(ev.keyCode == 8 && t != "password"&& t != "text"&& t != "textarea"){
returnfalse;
}
}
//禁止后退键 作用于Firefox、Opera
document.onkeypress=doKey;
//禁止后退键  作用于IE、Chrome
document.onkeydown=doKey;

以上的bug在于,当编辑窗口中有一个不可编辑的输入框的时候,如果光标的位置在其上,敲退格键的时候依然会发生页面后退.所以,第二种方法做了改良:代码如下

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外
functionbanBackSpace(e){
    varev = e || window.event;//获取event对象
    varobj = ev.target || ev.srcElement;//获取事件源
    vart = obj.type || obj.getAttribute('type');//获取事件源类型
    //获取作为判断条件的事件类型
    varvReadOnly = obj.getAttribute('readonly');
    varvEnabled = obj.getAttribute('enabled');
    //处理null值情况
    vReadOnly = (vReadOnly == null) ? false: vReadOnly;
    vEnabled = (vEnabled == null) ? true: vEnabled;
    //当敲Backspace键时，事件源类型为密码或单行、多行文本的，
    //并且readonly属性为true或enabled属性为false的，则退格键失效
    varflag1=(ev.keyCode == 8 && (t=="password"|| t=="text"|| t=="textarea")
                && (vReadOnly==true|| vEnabled!=true))?true:false;
    //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效
    varflag2=(ev.keyCode == 8 && t != "password"&& t != "text"&& t != "textarea")
                ?true:false;
    //判断
    if(flag2){
        returnfalse;
    }
    if(flag1){
        returnfalse;
    }
}
//禁止后退键 作用于Firefox、Opera
document.onkeypress=banBackSpace;
//禁止后退键  作用于IE、Chrome
document.onkeydown=banBackSpace;

而以上的bug在于,在浏览器中,光标在一个不可编辑的输入框上的时候,退格键依然会产生页面后退效果!

原因: 在Firefox及Chrome中obj.getAttribute('readonly') 返回的值是null,或"",而在IE中,该方法返回的是"readonly"或"",而且根据测试,

并没有"enable"的属性,而应该是"disabled",因此,上述方法固然会失效.而且获取DOM的对象属性及标准属性的时候,不应该采用getAttribute方法,这是不准确的,应采用obj.attribute标准方法,这样不会存在因浏览器对js的解释差异而导致的兼容性问题.因此修正以上bug后,产出的代码如下:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外
functionbanBackSpace(e){
    varev = e || window.event;//获取event对象
    varobj = ev.target || ev.srcElement;//获取事件源
    vart = obj.type || obj.getAttribute('type');//获取事件源类型
    //获取作为判断条件的事件类型
    varvReadOnly = obj.readOnly;
    varvDisabled = obj.disabled;
    //处理undefined值情况
    vReadOnly = (vReadOnly == undefined) ? false: vReadOnly;
    vDisabled = (vDisabled == undefined) ? true: vDisabled;
    //当敲Backspace键时，事件源类型为密码或单行、多行文本的，
    //并且readOnly属性为true或disabled属性为true的，则退格键失效
    varflag1= ev.keyCode == 8 && (t=="password"|| t=="text"|| t=="textarea")&& (vReadOnly==true|| vDisabled==true);
    //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效
    varflag2= ev.keyCode == 8 && t != "password"&& t != "text"&& t != "textarea";
    //判断
    if(flag2 || flag1)returnfalse;
}
//禁止退格键 作用于Firefox、Opera
document.onkeypress=banBackSpace;
//禁止退格键 作用于IE、Chrome
document.onkeydown=banBackSpace;


//我这里结合实际应用中遇到的问题做了修改
function doKey(e){//处理键盘事件jiangkun
var ev = e || window.event;//获取event对象
var obj = ev.target || ev.srcElement;//获取事件源
var t = obj.type || obj.getAttribute('type');//获取事件源类型
var condition=false;
if(obj.getAttribute('readonly')=='readonly'||obj.getAttribute('readonly')==true){
condition=(ev.keyCode==8);
}
if(condition){
return false;
}
}

javascript禁用Backspace退格键（结合自己实际应用中遇到的textarea中退格造成页面假死问题做了修改）相关推荐

  1. javascript 模拟退格键_javascript禁止Backspace退格键的多种方法

    方法1,采用键盘监听,处理键盘事件,处理方法是将type="text" "password"及"textarea"的输入框以外的元素做了退格 ...

  2. js禁止退格键(Backspace)

    为了解决按退格键返回历史页面的问题,用js禁止Backspace键是很好的选择. 下面的方法在项目中用到了,很不错的.贴上来分享一下: function banBackSpace(e) {       ...

  3. linux里数据库退格,Oracle Database for Linux 不能使用退格键

    方法一:要使用退格键的时候,同时按住ctrl+backspace 方法二:在任意一个启动脚本中添加如下内容 [Oracle@night ~]$ tail -1 .bash_profile stty  ...

  4. oracle linux 退格,oracle database for linux 不能使用退格键

    方法一:要使用退格键的时候,同时按住ctrl+backspace 方法二:在任意一个启动脚本中添加如下内容 [oracle@night ~]$ tail -1 .bash_profile stty e ...

  5. 解决ubuntu中vi不能正常使用方向键与退格键的问题

    解决ubuntu中vi不能正常使用方向键与退格键的问题 方案一: 问题: ubuntu中vi在编辑状态下方向键不能用,还有回格键不能删除等我们平时习惯的一些键都不能使用. 解决办法: 可以安装vim ...

  6. js禁用退格键（BackSpace）

    js禁用退格键(BackSpace) 在TextBox中设置 contentEditable="false" 或者 ReadOnly="true" 那么该文本框 ...

  7. js控制禁用退格键回到上一个页面

    js控制禁用退格键回到上一个页面 我们在真实的项目开发中经常会使用JS 对键盘上的一些按键进行禁用,常见的比如说退格键(backspace/ 后退键),我在一个项目中就遇到过在页面编辑的时候禁用掉退格 ...

  8. JS禁用浏览器退格键

    转载至JS过滤BackSpace 我们在真实的项目开发中经常会使用JS对键盘上的一些按键进行禁用,常见的比如说退格键(backspace/后退键),我在一个项目中就遇到过在页面编辑的时候禁用掉退格键, ...

  9. 屏蔽Backspace(退格)键后退功能

    屏蔽"Backspace"(退格)键后退功能2008-01-17 16:18本来这个脚本不难,但是我接到的需求可不太容易实现 创建工单时,屏蔽"Backspace&quo ...

  10. js屏蔽键盘退格键（backspace或者叫后退键）1

    其实说禁用也不是完全禁用,后退键在各浏览器下默认为点击了一下后退按钮,只要保证正常的文字录入还可以用,其他情况下的退格键一律禁掉.看代码吧. Js代码   <script type=" ...

最新文章

  1. CSS3边框背景-边框背景(-border-image)
  2. ASP.NET的项目怎样在WindowsServer上部署
  3. mysql校对集_mysql之字符集与校对集
  4. 可视化分析js的内存分配与回收
  5. 一个显示器分两个屏幕_桌面改造计划2.0：一个显示器不够那就两个，桌面好物分享...
  6. android sd卡相关avc,Android 5.x 权限问题解决方法
  7. Nature最新封面：机器人进军考古界，破解3亿年前生物谜团 | 附Demo
  8. poj3280 Cheapest Palindrome（回文串区间dp）
  9. Linux tmux 使用指南
  10. 反病毒工具-LordPE
  11. 一款可以由电脑投屏到手机的软件deskreen[粉丝少于1000的电脑直播]
  12. Python模块大全（Mark随用随看）
  13. web前端开发常用的几种图片格式及其使用规范
  14. 浅析凸优化理论学习中的“坑”
  15. 2017知乎看山杯总结(多标签文本分类)
  16. java 项目中遇到的问题 和解决方案_java开发常见的问题及解决办法 - java开发中遇到的难点有哪些_java开发常见的问题及解决办法...
  17. 使用网络调试助手通过MQTT协议接入到华为云物联网平台
  18. 域渗透-横向移动(PTT)
  19. SGD(随机梯度下降)
  20. [转载]Android性能优化来龙去脉总结

热门文章

  1. 十个免费专利检索分析网站
  2. oeasy教您玩转vim - 60- # vim选项
  3. excel两列数据对比找不同_Excel | 如何核对两列/行数据，找不同？
  4. Android/ios/h5 三步调起QQ群聊，一键加群
  5. angularJs-基础用法
  6. 初入算法岗的切身经验之谈：干什么？怎么干？如何学？
  7. Zuul的3种超时问题，微服务响应超时问题，Zuul配置超时时间
  8. 阿里拍卖全链路导购策略首次揭秘
  9. html照片苹果手机,iPhone如何拍出漂亮唯美的照片
  10. 15分钟带你入门Pandas