我有一个表单(HTML),我想在其中使用 Enter 键浏览元素(Enter 键应该像 Tab 一样)。为了实现此功能,我使用了 PlusAsTab图书馆。我还需要其中一个文本框的自动完成功能。对于自动完成功能,我使用 Twitter Bootstrap 中的 TypeAhead。
所以我一起使用 PlusAsTab 和 Twitter Bootstrap。 现在,使用 Enter 键的 PlusAsTab 导航可以与与 TypeAhead 相关的元素以外的元素正常工作。对于与 TypeAhead 关联的元素,我需要按 Enter 两次才能导航。我尝试调试但没有成功。我对 Javascript 很陌生,因此无法正确调试它。
请在 JSFiddle 中查找代码.
为了方便起见,我也在这里附上了代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Trial</title>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="plus-as-tab form-inline" id="transtable">
<select class="span1" autofocus="autofocus"><option>Dr</option><option>Cr</option></select>
<select class="span4">
<option>SelectAccount</option>
<option>GodAccount</option>
<option>SundryCreditors</option>
<option>SundryDebtors</option>
<option>Capital</option>
<option>Cash</option>
<option>Sales</option>
</select>
<input type="text" class="span4" placeholder="Narration" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["ChequeNo : ","Account No : ","No : ","On Canara Bank : " ]'>
<div class="input-prepend">
<span class="add-on">Rs</span><input class="span3" size="12" type="text" onchange="nextrow(this)" onkeypress="return allowonlynum(event)">
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://joelpurra.github.com/plusastab/lib/emulatetab/src/emulatetab.joelpurra.js"></script>
<script src="http://joelpurra.github.com/plusastab/src/plusastab.joelpurra.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/js/bootstrap-typeahead.js"></script>
</body>
</html>
请帮助我进一步调试这个问题。
最佳答案
在 friend 的帮助下,我暂时解决了这个问题。在 PlusAsTab我在库中添加了一个调用来聚焦下一个元素,即,它将尝试两次聚焦下一个元素。我知道这不是正确的解决方案,但它解决了我的问题。
关于javascript - Twitter Bootstrap TypeAhead 与 PlusAsTab,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11418306/