**Hi Friends,**我正在做一个小任务,让用户在按下回车键时可以对html元素进行索引。
由于我是jquery的新手,我写了一些代码,在我看来,它会工作,但其中有一些问题。
初步调查结果
罪魁祸首代码,它不工作,因为在Msg标签中的输出是“未定义”
$('*').attr('tabindex').id
字符串
的数据
下面给出了代码,我甚至创建了一个JSFiddle。
jQuery
$(document).ready(function (eOuter) {
$('input').bind('keypress', function (eInner) {
if (eInner.keyCode == 13) //if its a enter key
{
var tabindex = $(this).attr('tabindex');
tabindex++; //increment tabindex
//after increment of tabindex ,make the next element focus
$('*').attr('tabindex', tabindex).focus();
**//Msg Label**
//Just to print some msgs to see everything is working
$('#Msg').text( this.id + " tabindex: " + tabindex
+ " next element: " + $('*').attr('tabindex').id);
return false; // to cancel out Onenter page postback in asp.net
}
});
}
);
型
超文本标记语言
<div>
Employee Info<br />
Name<br />
<input name="TxtbxName" type="text" value="ok" id="TxtbxName" tabindex="1" />
<br />
Age<br />
<input name="TxtbxAge" type="text" id="TxtbxAge" tabindex="2" />
<br />
Gender<br />
<select name="DdlGender" id="DdlGender" tabindex="3">
<option selected="selected" value="Male">Male</option>
<option value="Female">Female</option>
</select>
<br />
<div>
Previous Employment<br />
<select name="DdlCompany" id="DdlCompany" tabindex="4">
<option selected="selected" value="0">Folio3</option>
<option value="1">Null Soft</option>
<option value="2">Object Soft</option>
<option value="3">Excepption Soft</option>
</select>
or Enter Code
<input name="TxtbxCompanyCode" type="text" id="TxtbxCompanyCode" tabindex="5" />
<br />
Address<br />
<input name="TxtbxAddress" type="text" id="TxtbxAddress" tabindex="6" />
<br />
<input type="submit" name="BtnSubmit" value="Submit" id="BtnSubmit" tabindex="7"/>
<br />
<label id="Msg">Message here</label>
</div>
</div>
型
让我知道我错在哪里:
7条答案
按热度按时间q1qsirdb1#
我发现了几个jQuery的小问题。在这里修复:JSFiddle。
这一行:
字符串
可以这样写:
型
和这个:
型
没有以jQuery的方式调用id属性(您使用的是JavaScript语法,但$(this)的结果是一个jQuery对象。所以.
$(this).id
变成了$(this).attr('id')
。表单仍然有一个提交问题,我没有深入研究,但它改变了焦点,现在填写了'#Msg'元素。
pu82cl6c2#
下面是我在
keydown
上focusNextElement
的完整工作代码[Enter]**没有 jQuery,基于以下 stackoverflow 答案创建了JSFiddle example:字符串
d8tt03nd3#
不想做新的职位,使垃圾邮件与解决方案,我发现有用的。
从其他来源收集信息(Brian Glaz code nice-one),并使用Enter键制作了跨浏览器版本的Focus Next Element In Tab-index。
制表符索引不是一个接一个**,但也可以包含空格(1,2,9,11,30等)
字符串
我希望有人会发现它有用。随时编辑/评论它。
tvz2xvvm4#
字符串
bttbmeg05#
为了解决这个问题,我生成了一个小的jquery函数来查找下一个有效的tabindex;假设它更容易维护,并且可能比while循环快一点:
字符串
希望这对需要它的人有帮助;这是测试和工作。
简而言之:查找当前tabindex的元素,在所有tabindex元素的列表中找到该元素,得到它的索引并增加索引。
然后,使用这个函数,你可以这样选择下一个tabindex元素:
型
我没有测试电话,但假设它工作。
piztneat6#
tab-index
应该总是0
。正如WebAIM Keyboard Accessibility documentation和W3C criterion所指出的。希望这对你有帮助。eqoofvh97#
字符串
表格中可编辑单元格的示例
型
Editable cells in dynamic table