网页防止tab键的使用快速解决方法


Posted in Javascript onNovember 07, 2013

在一些网页或者说在弹出层的使用下,一般情况在ie浏览器下 我们都不希望使用tab 或者说 

使用tab键后都会造成一定的问题,例如:

在弹出层后,tab键还可以在目页中操作,这回导致脚本错误。

那么我们如果避免这种情况呢?

通过键盘事件来控制

<script language="javascript" type="text/javascript" src="../javascript/jquery-1.2.6.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $(document).bind('keydown', function (event) {
                if (event.keyCode == 9) {
                    document.body.focus();
                }
            });
        });
    </script>

以上代码很熟悉 就是按tab键的时候 将焦点再次移到tabindex为0的上面

那么我们这时便需要在页面开始的时候 就设置初始化的页面焦点

例如下面用aspx写的例子:

  <box:Button ID="BtnClose" Text="关闭" runat="server" SystemIcon="Close" TabIndex="0" FocusOnPageLoad="true">
            </box:Button>

在一些特殊的情况下 我们需要在页面加载的时候设置一下焦点的位置,以便防止 tabindex的设置会出现无效 或受其他因素的影响.

这样才能做到万无一失!

Javascript 相关文章推荐
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 #Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 #Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 #Javascript
jQuery把表单元素变为json对象
Nov 06 #Javascript
JQuery插件开发示例代码
Nov 06 #Javascript
javascript实现yield的方法
Nov 06 #Javascript
Javascript事件实例详解
Nov 06 #Javascript
You might like
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
php的socket编程详解
2016/11/20 PHP
php批量修改表结构实例
2017/05/24 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
创业计划书如何吸引他人眼球
2014/01/10 职场文书
护士在校生自荐信
2014/02/01 职场文书
财经学院自荐信范文
2014/02/02 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
起诉意见书范文
2015/05/19 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android