大家可能会注意到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的优先级最高,依次排序即可、
分享到:
相关推荐
tab 键可以使控件按照tabindex 获取焦点,但是有时我们用enter更易用些.
@4rk/vue-roving-tabindex 将漫游tabindex添加到Vue组件。 这对于根据在组件内部实现键盘导航很有用。 安装 import VueRovingTabindex from "@4rk/vue-roving-tabindex" ; Vue . use ( VueRovingTabindex ) ; 用法 ...
用tabIndex轻松实现网页导航
快捷键在日常的使用还是挺多的,例如熟悉的粘贴ctrl+v,复制 ctrl+c,使用快捷键能提高我们的做事效率,特别是当我们熟悉了一种操作后,再次使用它来进行操作就会变得很方便,很顺手,对于使用键盘的重度用户,键盘...
使用流动标签索引 将tabindex作为微小的(601B)React钩 例子 安装 npm install use-roving-tabindex 用法 import { useRovingTabindex } from "use-roving-tabindex" ; function BasicExample ( ) { const [ ...
' 在窗体添加一个Panel控件(Panel1)、一个Button控件(Button1),一个TextBox控件(TextBox6),在容器Panel1中添加5个TextBox控件(TextBox1~TextBox5)用来模拟控件数组,分别设置TabIndex属性为0~4。
TabIndex就是按Tab键有顺序的获取定义过的TabIndex元素设置在各个元素之间的焦点。
表单的焦点tab键顺序:tabindex决定,如果值缺省,择按顺序 用户:<input name=”Text1″ type=”text” tabindex=”1″ /> 密码:<input name=”Password1″ type=”password” tabindex=”2″ >对应...
围绕表单的可访问性与交互性上,各浏览器都下了很大工夫,比如fieldset与legend等用于增强区域感的元素,for,accessKey,defaultValue,maxlength,tabIndex等用于交互或提示的属性。不过,今天只讲tabIndex。
react-tabindex使用以下命令巧妙地管理React中的Tab可访问性 和useTabIndex挂钩! 支持嵌套的Tabbable状态-嵌套的手风琴,菜单,模态等。不执行手动DOM操作,查询或引用管理-只是纯声明式React。 最小小于1 kB,无...
下面小编就为大家带来一篇HTML5之tabindex属性全面解析。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
React流动指数React Hooks实现了流动的tabindex,现在有了网格支持。 请参阅的故事书以进行尝试。背景漫游tabindex是一组输入的可访问性模式。 它可以帮助使用键盘来浏览您的网站的人们。 组中的所有输入都被视为一...
主要为大家详细介绍了vue+element搭建后台小总结,el-dropdown下拉功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要介绍了bootstrap模态框嵌套、tabindex属性、去除阴影,需要的朋友可以参考下
Tabindex 焦点导航解释器 文档: :