网页防止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 相关文章推荐
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
Node.js模块加载详解
Aug 16 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
判断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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
PHP实现小偷程序实例
2016/10/31 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
社区活动策划方案
2014/08/21 职场文书
委托公证书样本
2015/01/23 职场文书
学期个人工作总结
2015/02/13 职场文书
工作态度不好检讨书
2015/05/06 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫