这可能是重复的,无法告诉,我搜索但无法找到方法或答案,以避免在像这样的场景中使用焦点和JavaScript时滚动页面。
我正在编写一个小工具,可以在数据库中搜索并使其更加用户友好。我添加了"显示建议"特征。因此,当用户键入搜索框并找到匹配项时,它会显示包含建议的下拉列表。我的一个朋友要求我为这个下拉列表添加键盘支持(就像HTML下拉列表一样),并在尝试使用JavaScript来模仿我得到的效果时:http://jsfiddle.net/9jaazwxa/
但是,当您键入键盘中的向下或向上箭头时,它还会向页面添加不需要的滚动行为。
有可能避免这种情况吗?
HTML:
var i = 0;
var itemnum = document.querySelectorAll('#navlist > ul > li');
var topval = itemnum.length;
var searchbox = document.getElementById('search-box');
var navlist = document.getElementById('navlist');
searchbox.addEventListener('keydown', showhidden, false);
searchbox.addEventListener('keydown', tabnav, true);
navlist.addEventListener('keydown', tabnav, true);
function showhidden(){
document.getElementById('navlist').style.display = "block";
}
function tabnav(event){
switch(event.keyCode){
case 40: //down arrow
if(i < topval){
i++;
var activetab = document.getElementById('tab-' + i);
activetab.style.backgroundColor = "yellow";
activetab.focus();
if(i > 1){
var prevtab = document.getElementById('tab-' + (i-1));
prevtab.style.backgroundColor = "transparent";
}
}
else if(i > topval){
i = 1;
var activetab = document.getElementById('tab-' + i);
activetab.style.backgroundColor = "yellow";
activetab.focus();
var prevtab = document.getElementById('tab-' + ( i + topval));
prevtab.style.backgroundColor = "transparent";
}
break;
case 38: //up arrow
if(i > 1){
i--;
var activetab = document.getElementById('tab-' + i);
activetab.style.backgroundColor = "yellow";
activetab.focus();
var prevtab = document.getElementById('tab-' + (i+1));
prevtab.style.backgroundColor = "transparent";
}
}
}
&#13;
body{
font-family:Arial, sans-serif;
max-width:960px;
margin:2em;
}
.short-parr{
max-width:450px;
}
#navlist {
display:none;
}
&#13;
<h2>Navigate suggestion list</h2>
<form id="theForm" action="#" method="get">
<label>Search box</label><br />
<input id="search-box" type="text" name="q" autocomplete="off"/>
<input type="submit" value="submit"/>
</form>
<h4>Suggestions</h4>
<div id="navlist">
<ul>
<li><a id="tab-1" href="#">1 tab option</a></li>
<li><a id="tab-2" href="#">2 tab option</a></li>
<li><a id="tab-3" href="#">3 tab option</a></li>
<li><a id="tab-4" href="#">4 tab option</a></li>
</ul>
</div>
<p class="short-parr">Lorem ipsum dolor sit amet, et utinam minimum pertinacia duo, ut laoreet invidunt maiestatis eum. Justo volutpat cu sit, quo quaeque fabulas consulatu an. Meliore phaedrum evertitur te pro, no eros elit magna pri. Ut unum ferri neglegentur duo.</p>
<p class="short-parr">Quis doming eloquentiam vix at, pro veri accumsan expetenda in. Mei id homero legimus. Ex idque omnium sit, aliquam consequuntur mel ei, mea enim virtute mandamus te. Nam in debitis denique dissentiet. Mei docendi accusam persecuti ea.</p>
<p class="short-parr">Vix corpora fierent cu, his et mutat omnesque, quodsi convenire at pri. Magna possit an eam. Paulo dolorem adversarium mei at, doctus omittam senserit ea per, vel congue voluptatibus id. Duo odio adversarium an, paulo graece persecuti his ex. Eum no viderer mentitum definiebas, duo affert reformidans et.</p>
<p class="short-parr">Usu cu recusabo mediocrem, ius ea falli facilisis molestiae. His postea graeci adversarium eu, in dicit putent mollis pri. Quo errem alienum appellantur eu, eu pro blandit copiosae. Ut vis nibh labitur delicata, ex nihil assueverit vim, est novum causae nonumes cu.</p>
<p class="short-parr">Eos id altera sensibus dissentiunt, nec ei consul salutatus. Ius at atqui nemore. Ne esse laoreet vis. Cetero euismod volutpat eum cu. Ut delenit alienum nominavi qui, solet nominavi qui ex. Mea graecis incorrupte ne, vis iisque suscipiantur ei.</p>
&#13;
答案 0 :(得分:2)
您只需添加防止默认值:
function tabnav(event){
event.preventDefault();
.
当然,将其插入&#39;案例箭头向下/向上&#39;否则你根本没有任何输入