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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
javascript的事件描述
Sep 08 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
原生js实现分页效果
Sep 23 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
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
微信小程序入门教程
2016/11/18 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
python之wxPython菜单使用详解
2014/09/28 Python
Windows下安装python2.7及科学计算套装
2015/03/05 Python
python中解析json格式文件的方法示例
2017/05/03 Python
python实现最长公共子序列
2018/05/22 Python
python 公共方法汇总解析
2019/09/16 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
Python操作Excel的学习笔记
2021/02/18 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
实习生求职自荐信
2014/02/07 职场文书
求职意向书范本
2015/05/11 职场文书
人民检察院起诉书
2015/05/20 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby