今天在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. [SQL] 让特定的数据 排在最前

    MYSQL目前常用的两种方法,如下: 让值为"张三" 的数据排在最前. -- 方法一 end asc -- 方法二 select * from tableName where co ...

  2. ManyToMany参数(through,db_constraint)

    through : 指定自己写好的第三张表,我们可以给第三张表添加字段了(告诉Django不用建第三张表了,我们都给他配好了) class Book(models.Model): name=model ...

  3. python+Nginx+uWSGI使用说明

    安装环境 Remote: CentOS 7.4 x64 (django.example.com) Python: Python3.6.5 Django: Django 2.0.4 nWSGI:  uw ...

  4. Spring 小知识

    1:Advice环绕通知相当于  aop:before之类的 2:Mybatis执行流程: Configuration对象时运行项目时,就直接生成了. 2.1 通过XMLBuilder 解析XML,  ...

  5. MySQL server has gone away With statement: INSERT INTO `students`......

    mysql出现ERROR : (2006, 'MySQL server has gone away') 的问题意思就是指client和MySQL server之间的链接断开了. 首选分析给出可能出现的 ...

  6. centos7 lua安装

    yum -y install gcc automake autoconf libtool makeyum install readline-develcurl -R -O http://www.lua ...

  7. 文件下载—SSH框架文件下载

    1.准备下载的api组件 <dependency> <groupId>commons-io</groupId> <artifactId>commons- ...

  8. Mail.Ru Cup 2018 Round 1

    A. Elevator or Stairs? 签. #include <bits/stdc++.h> using namespace std; ]; int main() { while ...

  9. EditPlus 4.3.2473 中文版已经发布(10月21日更新)

    新的 EditPlus 修复了如下问题: * Ctrl+鼠标拖放文本功能异常 * 上传文件到 FTP 服务器失败后将弹出对话框,可重试上传 * 列选模式下粘贴到现存的选中内容时文本错乱的问题 本博客已 ...

  10. React 函数传参

    import React, { Component } from 'react'; import { render } from 'react-dom'; class GroceryList exte ...