我有一个屏幕,允许用户添加和删除行以输入分数。输入行基于选定的样本类型和预先配置的“模板”创建(例如,按我的图片...选择心脏,默认情况下添加“细菌,全鸟”和“假单胞菌,面包屑”) ,但他们也可以根据需要添加或删除行。
我希望这样,当用户使用标签页时,它只会在文本框中进行标签浏览,而不会在下拉框中显示标签。
代码
指数
@Html.ActionLink("New Row...", "AddRow", null, new { id = "addItem" })
<div id="overflw" style="height: 260px; width: 885px; overflow: auto; border: 1px solid black">
<div id="editorRows">
@if (Model.Micros != null)
{
foreach (var item in Model.Micros)
{
Html.RenderPartial("MicroRow", item);
}
}
</div>
</div>
<script type="text/javascript">
$(".deleteRow").button({ icons: { primary: "ui-icon-trash" },
text: false
});
</script>
微行
<div class="editorRow" style="padding-left: 5px">
@using (Html.BeginCollectionItem("micros"))
{
ViewData["MicroRow_UniqueID"] = Html.GenerateUniqueID();
@Html.EditorFor(model => model.Lab_T_ID, new { UniqueID = ViewData["MicroRow_UniqueID"] })
@Html.EditorFor(model => model.Lab_SD_ID, new { UniqueID = ViewData["MicroRow_UniqueID"] })
@Html.TextBoxFor(model => model.Result)
<input type="button" class="deleteRow" title="Delete" value="Delete" />
}
</div>
最佳答案
好吧,我能想到的最简单的方法是,只要您在一个文本框中,就劫持Tab键。我在这里放置了fiddle,这可能使我对我的意思有一个大致的了解。
<input type='text' id='n1' data-key='1' />
<input type='text' id='n2' data-key='2' />
<input type='text' id='n5' value = 'Tab skips me'/>
<input type='text' id='n3' data-key='3' />
<input type='text' id='n4' data-key='4' />
$(function(){
$('input[type="text"]').keydown(function(e){
if(e.which === 9){
e.preventDefault();
var self = $(this),
myIndex = parseInt(self.data('key'),10),
nextIndex = myIndex + 1,
nextElement = $('input[data-key="'+ nextIndex +'"]');
nextElement.focus();
}
});
});
编辑-使用TabIndexes
上面的代码段按宣传的方式工作时,您可能还想使用tabindex签出。我承认,这是我所不知道的东西。但是,在阅读完注释后,认为这可能更适合您的要求。我已经updated a fiddle展示了它是如何工作的。一探究竟
<input type='text' id='n1' tabindex='1' value="I'm first" />
<input type='text' id='n2' tabindex='3' value="I'm third" />
<input type='text' id='n5' value="I'm last"/>
<input type='text' id='n3' tabindex='2' value="I'm second" />
<input type='text' id='n4' tabindex='4' value="I'm fourth" />
关于javascript - 动态文本框的选项卡索引,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/9988777/