在表格中的可编辑字段之间切换 [英] tabbing between jeditable fields in a table
本文介绍了在表格中的可编辑字段之间切换的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
I'm using code from here http://www.korvus.com/blog/geek/making-the-tab-key-work-with-jeditable-fields/ to get tabbing between jeditable fields working, and if the fields are on their own it works fine. However I need to have my fields in a table, and the only time the tab key works is tabbing from the last field to the first, and of course I need it to tab from first to next and so on...
$('div.edit').bind('keydown', function(evt) {
if(evt.keyCode==9) {
$(this).find("input").blur();
var nextBox='';
if ($("div.edit").index(this) == ($("div.edit").length-1)) {
nextBox=$("div.edit:first"); //last box, go to first
} else {
nextBox=$(this).next("div.edit"); //Next box in line
}
$(nextBox).click(); //Go to assigned next box
return false; //Suppress normal tab
};
});
表格的格式如下
<table>
<tr>
<td class='leftcolumn'>
<strong>Firstname:</strong>
</td>
<td>
<div class='edit' id='firstname'><?=$userdetail['firstname']?></div>
</td>
</tr>
<tr>
<td class='leftcolumn'>
<strong>Lastname:</strong>
</td>
<td>
<div class='edit' id='lastname'><?=$userdetail['lastname']?></div>
</td>
</tr>
</table>
预先感谢
推荐答案
我认为问题在于您的输入字段彼此之间不是直接的同级,因此"next()"失败了.我认为这会起作用:
I believe the issue is that your input fields are not direct siblings to each other, thus "next()" is failing. I think this will work:
$('div.edit').bind('keydown', function(evt) {
if(evt.keyCode==9) {
var nextBox='';
var currentBoxIndex=$("div.edit").index(this);
if (currentBoxIndex == ($("div.edit").length-1)) {
nextBox=$("div.edit:first"); //last box, go to first
} else {
nextBox=$("div.edit").eq(currentBoxIndex+1); //Next box in line
}
$(this).find("input").blur();
$(nextBox).click(); //Go to assigned next box
return false; //Suppress normal tab
};
});
这篇关于在表格中的可编辑字段之间切换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文