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

代码如下:

 1 //处理键盘事件 禁止后退键(Backspace)密码或单行、多行文本框除外
2 function banBackSpace(e){
3 var ev = e || window.event;//获取event对象
4 var obj = ev.target || ev.srcElement;//获取事件源
5 var t = obj.type || obj.getAttribute('type');//获取事件源类型
6 //获取作为判断条件的事件类型
7 var vReadOnly = obj.getAttribute('readonly');
8 //处理null值情况
9 vReadOnly = (vReadOnly == "") ? false : vReadOnly;
10 //当敲Backspace键时,事件源类型为密码或单行、多行文本的,
11 //并且readonly属性为true或enabled属性为false的,则退格键失效
12 var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea")
13 && vReadOnly=="readonly")?true:false;
14 //当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效
15 var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea")
16 ?true:false;
17
18 //判断
19 if(flag2){
20 return false;
21 }
22 if(flag1){
23 return false;
24 }
25 }
26
27 window.onload=function(){
28 //禁止后退键 作用于Firefox、Opera
29 document.onkeypress=banBackSpace;
30 //禁止后退键 作用于IE、Chrome
31 document.onkeydown=banBackSpace;
32 }

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

JavaScript学习总结(二十二)——JavaScript屏蔽Backspace键的更多相关文章

  1. JavaScript学习笔记(十二)——箭头函数(Arrow Function)

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  2. 我的MYSQL学习心得(十二) 触发器

    我的MYSQL学习心得(十二) 触发器 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数 ...

  3. VSTO 学习笔记(十二)自定义公式与Ribbon

    原文:VSTO 学习笔记(十二)自定义公式与Ribbon 这几天工作中在开发一个Excel插件,包含自定义公式,根据条件从数据库中查询结果.这次我们来做一个简单的测试,达到类似的目的. 即在Excel ...

  4. 我的MYSQL学习心得(十二)

    原文:我的MYSQL学习心得(十二) 我的MYSQL学习心得(十二) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYS ...

  5. Spring+SpringMVC+MyBatis深入学习及搭建(十二)——SpringMVC入门程序(一)

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6999743.html 前面讲到:Spring+SpringMVC+MyBatis深入学习及搭建(十一)——S ...

  6. Linux学习总结(十二)—— CentOS用户管理:创建用户、修改用户、修改密码、密码有效期、禁用账户、解锁账户、删除用户、查看所有用户信息

    文章首发于Linux学习总结(十二)-- CentOS用户管理,请尊重原创保留原文链接. 创建用户 useradd -g webadmin -d /home/zhangsan zhangsan pas ...

  7. python3.4学习笔记(二十二) python 在字符串里面插入指定分割符,将list中的字符转为数字

    python3.4学习笔记(二十二) python 在字符串里面插入指定分割符,将list中的字符转为数字在字符串里面插入指定分割符的方法,先把字符串变成list然后用join方法变成字符串str=' ...

  8. 汇编入门学习笔记 (十二)—— int指令、port

    疯狂的暑假学习之  汇编入门学习笔记 (十二)--  int指令.port 參考: <汇编语言> 王爽 第13.14章 一.int指令 1. int指令引发的中断 int n指令,相当于引 ...

  9. 学习笔记:CentOS7学习之二十二: 结构化命令case和for、while循环

    目录 学习笔记:CentOS7学习之二十二: 结构化命令case和for.while循环 22.1 流程控制语句:case 22.2 循环语句 22.1.2 for-do-done 22.3 whil ...

  10. (C/C++学习笔记) 二十二. 标准模板库

    二十二. 标准模板库 ● STL基本介绍 标准模板库(STL, standard template library): C++提供的大量的函数模板(通用算法)和类模板. ※ 为什么我们一般不需要自己写 ...

随机推荐

  1. type="submit"

    <?php var_dump($_REQUEST); ?> <form action="" id="javascript_page"> ...

  2. 设计模式之——Observer模式

    Observer模式又叫做观察者模式,当观察对象状态发生变化的时候,就会通知给观察者.这种模式适用于根据对象状态进行响应的场景! 实例程序是一个输出数字的程序. 观察者Observer类用于每500m ...

  3. saltstack相关

    通过saltstack实现根据不同业务特性进行配置集中化管理,分发文件,采集服务器数据,操作系统基础及软件包管理等第一层为web交互层,采用django+mysql+bootstarp实现,服务端采用 ...

  4. 通过pd.to_sql()将DataFrame写入Mysql

    循环创建表,并且创建主键.外键 import pandas as pd from sqlalchemy import create_engine from sqlalchemy.types impor ...

  5. android(十五) FTP的两种工作模式

    (一)PORT(主动)方式的连接过程是:客户端向服务器的FTP端口(默认是21)发送连接请求,服务器接受连接,建立一条命令链 当需要传送数据时,客户端在命令链路上用 PORT命令告诉服务器:“我打开了 ...

  6. Spark Shuffle调优原理和最佳实践

    对性能消耗的原理详解 在分布式系统中,数据分布在不同的节点上,每一个节点计算一部份数据,如果不对各个节点上独立的部份进行汇聚的话,我们计算不到最终的结果.我们需要利用分布式来发挥Spark本身并行计算 ...

  7. [svc]堡垒机模型设计初步

    models from django.contrib.auth.models import AbstractUser from django.db import models # Create you ...

  8. Linux系统——FTP

    FTP连接及传输模式1. 控制连接:TCP21,用于发送FTP命令信息2. 数据连接:TCP20,用于上传.下载数据3. 数据连接的建立类型:(1)主动模式:服务器制动发起数据连接首先由客户端向服务端 ...

  9. tcp socket http(复制的)

    物理层-- 数据链路层-- 网络层--                       IP协议 传输层--                       TCP协议 会话层-- 表示层和应用层--     ...

  10. http之状态码含义

    状态代码有三位数字组成,第一个数字定义了响应的类别,共分五种类别: 1xx:指示信息--表示请求已接收,继续处理 2xx:成功--表示请求已被成功接收.理解.接受 3xx:重定向--要完成请求必须进行 ...