嗨朋友们,
我正在开展一项小任务,即让用户在输入按键时对html元素进行tabindex.
作为jquery的新手,我已经编写了一些代码,在我看来它会起作用,但是它有一些问题.
初步调查结果
罪魁祸首代码,它不起作用,因为Msg lablel中的输出是“Undefined”
$('*').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
}
});
}
);
HTML
<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>
让我知道我哪里出错了:/
解决方法:
我发现了一些小的jQuery问题.修正了这里:JSFiddle.
这一行:
$('*').attr('tabindex', tabindex).focus();
可以像这样写:
$('[tabindex=' + tabindex + ']').focus();
和这个:
$('#Msg').text($(this).id + " tabindex: " + tabindex
+ " next element: " + $('*').attr('tabindex').id);
不是用jQuery方式调用id属性(你使用的是JavaScript语法,但是$(this)的结果是一个jQuery对象.所以… $(this).id变成$(this).attr(‘id’ ).
表单仍有提交问题,我没有深入研究,但它改变了焦点并填写了’#Msg’元素.