`
aokunsang
  • 浏览: 816004 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

tabindex的微妙使用

阅读更多

         大家可能会注意到input,select,textArea等文本框都会有一个属性tabindex,但是都没有用过这个tabindex吧、
简单说一下tabindex;它主要是设置页面上使用Tab键改变页面上文本框获取焦点的顺序。它的值为数字,1,2,3。。。
默认进入页面,光标(即焦点)会选中左上方第一个文本框。 

目前项目中遇到打开个子窗口时候,不想让子页面的光标定位到默认的文本框中,该怎么办呢?

<input type='text' name = 'name1'/>
<select name = 'name2'><option value='1'></option></select>
<textArea name="name3" cols='2' rows='2'></textArea>

 默认页面光标定位到type="text"中,如果我想让光标定位到select文本框上,目前有两个方法:

 

 1、一般有人都会在该页面的最后部分加上一个JavaScript、     

 <script langage="text/javascript">
         document.form.name2.focus();
   </script>

      但是这种方法偶尔会js报错:"由于该控件目前不可见、未启用或其类型不允许,因此无法将焦点移向"等等、经测试,发现只要这个页面打开的速度慢的时候就会报错。

2、接下来的方法就要使用本文所说的tabindex了、

   <input type='text' name = 'name1' tabindex='3'/>
   <select name = 'name2'><option value='1' tabindex='1'></option></select>
   <textArea name="name3" cols='2' rows='2' tabindex='2'></textArea>

如果想让光标定位到哪个文本框,则把该文本框的tabindex设置为1,即1的优先级最高,依次排序即可、

 

 

分享到:
评论
9 楼 masuweng 2016-11-30  
     
8 楼 waiting 2012-01-30  
aokunsang 写道
riemann 写道
<script></script>
long long ago就没问题,可以试试IE6

IE6也畅通无阻的、

应该和浏览器没啥关系而是XHTML有关,HTML不要求这种格式
7 楼 yfchu 2012-01-30  
撒旦撒旦v
6 楼 aokunsang 2010-12-14  
riemann 写道
<script></script>
long long ago就没问题,可以试试IE6

IE6也畅通无阻的、
5 楼 riemann 2010-12-14  
<script></script>
long long ago就没问题,可以试试IE6
4 楼 javaDevil 2010-12-13  
刚测试了一把,<script></script>在ie 8,ff3.6下面 可以直接支持。
3 楼 waiting 2010-12-13  
xyztony1985 写道
<script langage="text/javascript">
这个写法不好,现在都用<script type="text/javascript">;


在HTML5里面更简单,直接用 <script></script> 。
2 楼 aokunsang 2010-12-08  
xyztony1985 写道
<script langage="text/javascript">
这个写法不好,现在都用<script type="text/javascript">;

document.form.name2.focus();  
这个写法也不好,兼容性有问题,最好用document.getElementById。

tabindex,俺基本不用,特别是表单项特别多的时候,就显得很麻烦。

如果真要用js定位到某个位置,可以将方法挂在window.onload下,就不会有那种报错。


当然是个人意见,仅供参考。


呵呵,谢谢!放在window.onload下,当时第一想到的就是它,但是测试发现不起作用,当时很郁闷,刚又测试了一下可以了,应该是浏览器的缓存吧、
这样虽说可以,但是还需要执行一个JavaScript,比起来tabindex还是麻烦了点。(表单项多的时候只要定位一两个tabindex就可以了啊)
1 楼 xyztony1985 2010-12-08  
<script langage="text/javascript">
这个写法不好,现在都用<script type="text/javascript">;

document.form.name2.focus();  
这个写法也不好,兼容性有问题,最好用document.getElementById。

tabindex,俺基本不用,特别是表单项特别多的时候,就显得很麻烦。

如果真要用js定位到某个位置,可以将方法挂在window.onload下,就不会有那种报错。


当然是个人意见,仅供参考。

相关推荐

    回车键tabindex 获取焦点 enter

    至于文件名为“TestSendKey”的压缩包,它可能包含了一些示例代码或者测试用例,用于演示如何在不同的编程语言或环境中使用键盘事件,尤其是回车键和tabindex来控制焦点和执行操作。在学习和使用这些示例时,理解...

    用tabIndex轻松实现网页导航

    标题和描述中提到的“用tabIndex轻松实现网页导航”主要涉及HTML中`tabIndex`属性的使用,这个属性用于定义元素在用户使用键盘进行导航时的顺序。在网页设计中,`tabIndex`是一个非常重要的特性,尤其对于增强无障碍...

    网页设计 TabIndex元素

    在网页设计中,`TabIndex` 是一个非常关键的属性,它用于控制用户通过键盘上的Tab键在页面元素间切换...合理使用`TabIndex`,可以使网页更易于导航,特别是对于那些依赖键盘操作的用户来说,能极大地提升他们的满意度。

    vue-roving-tabindex:向Vue组件添加漫游tabindex

    @4rk/vue-roving-tabindex 将漫游tabindex添加到Vue组件。 这对于根据在组件内部实现键盘导航很有用。 安装 import VueRovingTabindex from "@4rk/vue-roving-tabindex" ; Vue . use ( VueRovingTabindex ) ; 用法 ...

    javascript tabIndex属性

    随着浏览器的发展,现在大多数现代浏览器允许几乎所有的可渲染元素使用`tabIndex`属性。 `tabIndex`的取值范围通常是0到32767。值为0的元素会按照HTML源代码中的顺序获取焦点,而正整数值的元素会根据`tabIndex`的...

    use-roving-tabindex:将tabindex作为微小的(601B)React钩

    使用流动标签索引 将tabindex作为微小的(601B)React钩 例子 安装 npm install use-roving-tabindex 用法 import { useRovingTabindex } from "use-roving-tabindex" ; function BasicExample ( ) { const [ ...

    利用TabIndex模拟控件数组

    ' 在窗体添加一个Panel控件(Panel1)、一个Button控件(Button1),一个TextBox控件(TextBox6),在容器Panel1中添加5个TextBox控件(TextBox1~TextBox5)用来模拟控件数组,分别设置TabIndex属性为0~4。

    js设置组合快捷键/tabindex功能的方法

    在Web开发中,使用JavaScript设置tabindex属性和组合快捷键可以帮助用户更快地浏览和操作网页,提升用户的体验。以下是关于如何使用JavaScript设置tabindex和组合快捷键的方法及其知识点的详细介绍。 首先,...

    表单的焦点顺序tabindex和对应enter键提交

    总结来说,理解并合理运用`tabindex`、`onsubmit`和`enter`键提交,以及JavaScript的焦点管理,能够帮助开发者创建更符合用户习惯、易于使用的网页表单。这不仅提升了用户体验,也使得表单数据的验证和处理更加高效...

    HTML5之tabindex属性全面解析

    通过正确地使用tabindex属性,开发者可以自定义元素在页面中的Tab键焦点顺序,从而提升网站的可访问性。 首先,让我们来深入理解tabindex属性的几个关键点: 1. tabindex的值可以是一个整数。其中,正值(1, 2, 3.....

    在React中使用Sanely管理选项卡的可访问性和useTabIndex挂钩!-React开发

    react-tabindex使用以下命令巧妙地管理React中的Tab可访问性 和useTabIndex挂钩! 支持嵌套的Tabbable状态-嵌套的手风琴,菜单,模态等。不执行手动DOM操作,查询或引用管理-只是纯声明式React。 最小小于1 kB,无...

    tabindex:标签索引可视化工具

    在网页开发中,`tabindex`属性是一个非常关键的元素,它定义了用户在使用键盘进行导航时元素的聚焦顺序。`tabindex`是HTML5引入的一个特性,用于增强网页的可访问性,特别是对于视障用户或者使用键盘操作而非鼠标...

    tabIndex:由工作室创建

    在"tabIndex:由工作室创建"这个项目中,很可能是工作室开发了一个工具或者示例,旨在帮助开发者更好地理解和使用`tabIndex`属性。这个项目可能包含了一系列的HTML、CSS和JavaScript文件,演示了如何设置和使用`...

    bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码

    每个模态框都使用了 tabindex 属性,该属性规定了模态框的 tab 键控制次序。 tabindex 属性 tabindex 属性是 HTML 中的一个属性,用于规定元素的 tab 键控制次序。当 tabindex 属性存在时,不论其值等于多少,键盘...

    tabindex-focus-navigation-explainer:标签索引焦点导航解释器

    在网页设计和开发中,`tabindex` 是一个至关重要的属性,它关乎到用户的交互体验,特别是对于使用键盘进行导航的用户。`tabindex` 属性允许开发者控制元素在浏览器的焦点导航顺序,即用户通过 Tab 键在页面元素间...

    js键盘箭头控制上下选中标签元素

    在JavaScript编程中,使用键盘箭头来控制选中标签元素是一项常见的交互设计,尤其是在网页应用中。这个小demo展示了如何通过监听键盘事件并处理箭头键的按下,以实现元素的选择切换。以下将详细讲解这一功能的实现...

Global site tag (gtag.js) - Google Analytics