JavaScript函数分配表索引号
JavaScript function to assign tabindex numbers?
我有一个有许多字段的表单,我给了每一个输入,选择和按钮一个表索引号。这是可行的,但我想通过编程来实现。
默认的tabindex顺序是不正确的,因为我有一个两列布局,每列有组。我想从上到下按群体划分。我怎么写主体呢?Onload函数,以便它将分配所有输入,选择和按钮标签一个表索引数字基于包含的div?例如,对于我想首先循环的div,所有的输入、选择和按钮标签都可以是tabindex=1
,第二个div中的所有输入、选择和按钮标签都可以是tabindex=2
,以此类推。
谢谢!
下面是一个简化的例子
<style>
.a { display: inline-block;
width:200px;
border: 1px solid black;
}
</style>
<div class="a">
<div id="Div01" title="these inputs should have tabindex=1">
<p>Div 01</p>
<input id="Div01Field1" type="text" value="Me first"/>
<input id="Div01Field3" type="text" value="Me second"/>
<input id="Div01Field2" type="text" value="Me third"/>
<hr>
</div>
<div id="Div03" title="these inputs should have tabindex=3">
<p>Div 03</p>
<input id="Div03Field1" type="text" value="Me seventh"/>
<input id="Div03Field2" type="text" value="Me eighth"/>
<input id="Div03Field3" type="text" value="Me ninth"/>
<hr>
</div>
<div id="Div05" title="these inputs should have tabindex=5">
<p>Div 05</p>
<input id="Div05Field1" type="text" value="Me thirteenth"/>
<input id="Div05Field2" type="text" value="Me fourteenth"/>
<input id="Div05Field3" type="text" value="Me fifteenth"/>
</div>
</div>
<div class="a">
<div id="Div02" title="these inputs should have tabindex=2">
<p>Div 02</p>
<input id="Div02Field1" type="text" value="Me fourth"/>
<input id="Div02Field2" type="text" value="Me fifth"/>
<input id="Div02Field3" type="text" value="Me sixth"/>
<hr>
</div>
<div id="Div04" title="these inputs should have tabindex=4">
<p>Div 04</p>
<input id="Div04Field1" type="text" value="Me tenth"/>
<input id="Div04Field2" type="text" value="Me eleventh"/>
<input id="Div04Field3" type="text" value="Me twelfth"/>
<hr>
</div>
<div id="Div06" title="these inputs should have tabindex=6">
<p>Div 06</p>
<input id="Div06Field1" type="text" value="Me sixteenth"/>
<input id="Div06Field2" type="text" value="Me seventeenth"/>
<input id="Div06Field3" type="text" value="Me eighteenth"/>
</div>
</div>
Mike代码的一个更灵活的版本,它将tabIndex设置为div id中使用的数字。当您更改页面结构时,也不需要修改。
任何没有id或id与前缀-数字模式不匹配的div都将被忽略。
<script> "use strict"; // place after </body> tag
(function TabNumbers (pfx) {
/* For all divs in the document with an id pfx followed by a number,
set the tabIndex of all immediate children with tags of INPUT,
SELECT, or BUTTON to the numeric value */
pfx = new RegExp ('^' + pfx + '(''d+)$');
for (var divs = document.getElementsByTagName ('div'),
el, m, i = divs.length; i--;) { // traverse all divs
if ((m = divs[i].id.match (pfx))) { // for those with id Div#
for (el = divs[i].firstChild; el;
el = el.nextSibling) { // Traverse their child nodes
if (el.tagName === 'INPUT' || el.tagName === 'SELECT' ||
el.tagName === 'BUTTON') {
el.tabIndex = +m[1];
}
}
}
}
}) ('Div');
</script>
经过一些讨论,规范被修改,以下代码被接受:
<script> "use strict"; // place after </body> tag
(function TabNumbers () {
var itags = ["INPUT", "SELECT", "BUTTON"]
, tags
, tag
, el
, t
, a
;
while (itags.length) {
for (tags = document.getElementsByTagName (itags.pop ()), t = tags.length; t--;) {
el = tag = tags[t];
while ((el = el.parentNode) && el.tagName) {
if (el.getAttribute && (a = el.getAttribute ('data-tindex'))) {
tag.tabIndex = a;
break;
}
}
}
}
}) ();
</script>
Chrome测试
如果容器Div01
等可以有可排序的id,就像你的例子一样,那么你可以这样做
var groups = $('div[id^="Div"]').sort(function(a,b){
return (a.id > b.id) ? 1 : -1;
});
groups.find(':input').each(function(idx){
$(this).prop('tabindex', idx+1);
});
演示在 http://jsfiddle.net/gaby/sNekS/
或者 (和可能更正确的),你可以重新安排你的div,使它们在源代码中正确排序,并在渲染时仍然显示在左/右组(使用float:left
在内部div ),并使用没有脚本。
演示在 http://jsfiddle.net/gaby/sNekS/1/
香草Javascript解决方案(在添加类group
到Div##
元素和类input
到input/select/etc元素后)
var gnodes = document.getElementsByClassName('group'); // find elements with group class - non-sortable
var groups = []; // create empty array to hold groups - sortable
for (var i = 0, l = gnodes.length; i<l; i++){ // place elements in array so we can sort it
groups.push( gnodes[i] );
}
groups.sort(function(a,b){ // sort the array based on id
return (a.id > b.id) ? 1 : -1;
});
var counter = 1; // incremental number to define the tabindex
for (var i = 0, l = groups.length; i<l; i++){
var group = groups[i],
elements = group.getElementsByClassName('input'); // find all input elements of this group (must add class to all of them)
for (var e = 0, len = elements.length; e < len; e++){
elements[e].setAttribute('tabindex',counter++); // set tabindex
}
}
演示在 http://jsfiddle.net/gaby/sNekS/3/
假设您正在使用Prototype(您可能没有),它看起来像这样:
Event.observe(window, 'dom:load', function() {
var inputs = [$$('#div1 input, #div1 a'), $$('#div2 input')];
var i = 0;
inputs.each(function(inputList) {
inputList.each(function(input) {
i++;
input.tabIndex = i;
});
});
});
注意:未经考验的
<script type="text/javascript">
function TabNumbers() {
var t = document.getElementById('Div01').childNodes;
for (i = 0; i < t.length; i++) {
if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
t[i].tabIndex = 1;
}
}
var t = document.getElementById('Div02').childNodes;
for (i = 0; i < t.length; i++) {
if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
t[i].tabIndex = 2;
}
}
var t = document.getElementById('Div03').childNodes;
for (i = 0; i < t.length; i++) {
if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
t[i].tabIndex = 3;
}
}
var t = document.getElementById('Div04').childNodes;
for (i = 0; i < t.length; i++) {
if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
t[i].tabIndex = 4;
}
}
var t = document.getElementById('Div05').childNodes;
for (i = 0; i < t.length; i++) {
if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
t[i].tabIndex = 5;
}
}
var t = document.getElementById('Div06').childNodes;
for (i = 0; i < t.length; i++) {
if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
t[i].tabIndex = 6;
}
}
}
</script>
- 名称输入的索引
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 在循环中分配json值时,值被覆盖
- 动态分配GA增强型电子商务跟踪器
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 在jQuery中获取表的行索引
- 测试索引值是否等于某个数字的倍数
- 循环遍历数组中的特定索引
- 按照选项卡索引的顺序循环一个jQuery选择
- 在JavaScript中通过索引从对象数组中获取值
- Javascript原型通用Enquries和通过数组索引分配Id
- 如何动态地将索引分配给角度中的 ng-show 值
- 将用户输入分配给索引中带有变量的对象
- 如何在分配给数组索引的对象上调用方法
- 按 z 索引定位幻灯片并分配类
- 在jquery中为多维数组分配索引和值
- 从索引为1或更高的返回数组中分配元素
- 按索引分配属性的最佳方法是什么?
- 分配,在主索引页上为脚本使用唯一的Wordpress帖子id
- 将z索引按升序/降序动态分配给某个类的未知数量的元素