JavaScript屏蔽Backspace键的实现代码


Posted in Javascript onNovember 02, 2017

今天在IE浏览器下发现,当把使用readonly="readonly"属性将文本框设置成只读<input type="text" readonly="readonly"/>时有一个奇怪的问题:如果光标进入只读文本框,然后按下Backspace键,就会跳转到上一个页面,效果就像点击了浏览器的后退按钮返回前一个页面一样,而在火狐和google下没有这样的问题出现,为了解决这个问题,写了一个如下的处理方法,如果文本框是只读的,那么就禁用Backspace键。

代码如下:

//处理键盘事件 禁止后退键(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');
     //处理null值情况
     vReadOnly = (vReadOnly == "") ? false : vReadOnly;
     //当敲Backspace键时,事件源类型为密码或单行、多行文本的,
     //并且readonly属性为true或enabled属性为false的,则退格键失效
     var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") 
           && vReadOnly=="readonly")?true:false;
     //当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效
     var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea")
           ?true:false;    
     
     //判断
     if(flag2){
       return false;
     }
     if(flag1){  
       return false;  
     }  
   }
 window.onload=function(){
   //禁止后退键 作用于Firefox、Opera
   document.onkeypress=banBackSpace;
   //禁止后退键 作用于IE、Chrome
   document.onkeydown=banBackSpace;
 }

加上这样的处理之后,就可以解决"只读输入框在IE下按下Backspace键回退到前一个页面的问题了"

ps:用JS屏蔽backspace(退格删除)键或某一个指定键的完美代码

当我们的网页内有一个只读属性的表单时,如下:

<input type="text" readonly="readonly" name="HuoShangName" id="HuoShangName" />

上面的这个文本域只是用来向用户展示一些信息的,用户不能对其进行更改,所以加上了“readonly='readonly'”的只读属性,但是在IE8下面,从外观上是看不出来它和其它正常文本域的区别的,所以有的用户可能会对其进行一些删除或者添加内容的一些操作,比如当光标位于这个只读属性的文本域内时,如果用户按下了backspace(退格删除键),那么就会导致整个浏览器的后退,会让人很是郁闷,这时我们要做的就是屏蔽这个只读文本域上的一些指定的键,使用户按下这些键时不会引起浏览器的退后,刷新,或者前进等动作。

<input class="input w350" type="text" readonly="readonly" onkeydown="PingBi('8')" name="HuoShangName" id="HuoShangName" />

上面的代码中,onkeydown表示的是当按下按键时的意思,下面来JS函数pingbi的具体代码,也是非常简单的:

function PingBi(id){
 var k=window.event.keyCode;
 if(k==id){window.event.keyCode=0;window.event.returnValue=false;return false;}
}

好了,这样当光标位于只读属性的文本域内时,用户按下backspace(退格删除键)时就不会引起浏览器的后退了。

总结

以上所述是小编给大家介绍的JavaScript屏蔽Backspace键的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 精粹笔记
May 09 Javascript
javascript实现tab切换特效
Nov 12 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
老生常谈的跨域处理
Jan 11 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
js代码实现轮播图
May 04 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 #Javascript
为输入框加入数字js校验代码分享
Nov 02 #Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 #Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 #Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 #Javascript
vue-resource + json-server模拟数据的方法
Nov 02 #Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 #Javascript
You might like
php 图片上传类代码
2009/07/17 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
js window.event对象详尽解析
2009/02/17 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
pytorch的batch normalize使用详解
2020/01/15 Python
Python configparser模块常用方法解析
2020/05/22 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
新年爱情寄语
2014/04/08 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
教学副校长工作总结
2015/08/13 职场文书
庭外和解协议书
2016/03/23 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
把77A收信机改造成收音机
2022/04/05 无线电