![在此输入图像描述] [1]在我的应用程序中,我使用了MVC telerik网格,以输入文本框为界。当我在Internet Explorer和Chrome浏览器中运行应用程序时,工作正常和控件中的选项卡索引从一个文本框移动到另一个文本框。但是当使用Firefox浏览器时,选项卡索引从表格行移动到表格行并突出显示完整的单元格。
请帮我解决这个问题。
<div class="appln-cnt-c2">
<div class="frm-fldrow">
<div class="appln-txtrow" style="width: 800px; position: relative; left: 45px;">
@{
Html.Telerik().Grid(Model.FacultyCompositions)
.Name("FacultyComositionGrid")
.DataKeys(keys => keys.Add(m => m.FacultyCompositionPK))
.ClientEvents(events => events.OnComplete("FacultyComositionGrid_onComplete").OnError("FacultyComositionGrid_onError").OnDelete("OnDelete").OnEdit("OnEdit"))
.Columns(columns =>
{
columns.Bound(m => m.EthnicityDescription)
.Title("<strong>Ethnicity</strong>").Width(180).Filterable(false).Sortable(false).ReadOnly(true);
columns.Template(@<text>
<table cellspacing="0" cellpadding="0">
<tr id="data">
<td>
<input type="text" class="FacultyCompositionTextbox" value="@item.FCYear1Male" @(Model.ReadOnlyFacultyCompositionNew[0])@(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
</td>
<td>
<input class="FacultyCompositionTextbox" type="text" value="@item.FCYear1Female" @(Model.ReadOnlyFacultyCompositionNew[0]) @(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
<input class="FacultyCompositionTextbox" type="hidden" value="@item.EthnicityPK" />
</td>
</tr>
</table>
</text>)
.HeaderTemplate(
@<text>
<table cellspacing="0" cellpadding="0">
@if (Model.FacultyCompositionColumnHeader[0] != "")
{
<tr>
<td colspan="2"><strong>@Model.FacultyCompositionColumnHeader[0]</strong></td>
</tr>
<tr>
<td><span>M</span></td>
<td><span>F</span></td>
</tr>
}
else
{
<tr>
<td colspan="2"><strong></strong></td>
</tr>
<tr>
<td><span></span></td>
<td><span></span></td>
</tr>
}
</table>
</text>).Width(20);
columns.Template(@<text>
<table cellspacing="0" cellpadding="0">
<tr id="data">
<td>
<input type="text" class="FacultyCompositionTextbox" value="@item.FCYear2Male" @(Model.ReadOnlyFacultyCompositionNew[1]) @(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
</td>
<td>
<div style="position: relative;">
<input class="FacultyCompositionTextbox" type="text" value="@item.FCYear2Female" @(Model.ReadOnlyFacultyCompositionNew[1]) @(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
<input class="FacultyCompositionTextbox" type="hidden" value="@item.EthnicityPK" />
</div>
</td>
</tr>
</table>
</text>)
.HeaderTemplate(
@<text>
<table cellspacing="0" cellpadding="0">
@if (Model.FacultyCompositionColumnHeader[1] != "")
{
<tr>
<td colspan="2"><strong>@Model.FacultyCompositionColumnHeader[1]</strong></td>
</tr>
<tr>
<td><span>M</span></td>
<td><span>F</span></td>
</tr>
}
else
{
<tr>
<td colspan="2"><strong></strong></td>
</tr>
<tr>
<td><span></span></td>
<td><span></span></td>
</tr>
}
</table>
</text>).Width(20);
columns.Template(@<text>
<table cellspacing="0" cellpadding="0">
<tr id="data">
<td>
<input type="text" class="FacultyCompositionTextbox" value="@item.FCYear3Male" @(Model.ReadOnlyFacultyCompositionNew[2]) @(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
</td>
<td>
<input class="FacultyCompositionTextbox" type="text" value="@item.FCYear3Female" @(Model.ReadOnlyFacultyCompositionNew[2]) @(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
<input class="FacultyCompositionTextbox" type="hidden" value="@item.EthnicityPK" /></td>
</tr>
</table>
</text>)
.HeaderTemplate(
@<text>
<table cellspacing="0" cellpadding="0">
@if (Model.FacultyCompositionColumnHeader[2] != "")
{
<tr>
<td colspan="2"><strong>@Model.FacultyCompositionColumnHeader[2]</strong></td>
</tr>
<tr>
<td><span>M</span></td>
<td><span>F</span></td>
</tr>
}
else
{
<tr>
<td colspan="2"><strong></strong></td>
</tr>
<tr>
<td><span></span></td>
<td><span></span></td>
</tr>
}
</table>
</text>).Width(20);
columns.Template(@<text>
<table cellspacing="0" cellpadding="0">
<tr id="data">
<td>
<input type="text" class="FacultyCompositionTextbox" value="@item.FCYear4Male" @(Model.ReadOnlyFacultyCompositionNew[3]) @(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" /></td>
<td>
<input class="FacultyCompositionTextbox" type="text" value="@item.FCYear4Female" @(Model.ReadOnlyFacultyCompositionNew[3]) @(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
<input class="FacultyCompositionTextbox" type="hidden" value="@item.EthnicityPK" /></td>
</tr>
</table>
</text>)
.HeaderTemplate(
@<text>
<table cellspacing="0" cellpadding="0">
@if (Model.FacultyCompositionColumnHeader[3] != "")
{
<tr>
<td colspan="2"><strong>@Model.FacultyCompositionColumnHeader[3]</strong></td>
</tr>
<tr>
<td><span>M</span></td>
<td><span>F</span></td>
</tr>
}
else
{
<tr>
<td colspan="2"><strong></strong></td>
</tr>
<tr>
<td><span></span></td>
<td><span></span></td>
</tr>
}
</table>
</text>).Width(60);
})
.DataBinding(dataBinding => dataBinding.Ajax())
.ABAGridConfiguration(true)
.KeyboardNavigation(kbd => kbd.EditOnTab(false))
.Render();
}
</div>
</div>
</div>
答案 0 :(得分:1)
终于找到了解决方案:)
隐藏的步骤: 1.使用TAB键查找关联的键值 2.一旦Keydown事件触发焦点移动到下一个控件
$('input.FacultyCompositionTextbox').keydown(function(event) {
if(event.which == 9) {
//alert('a');
$(this).next('input.FacultyCompositionTextbox').focus();
}
});
此致 Praveen Nelge