javascript - 是否可以在更改对 HTML 元素的关注时避免页面滚动？ (使用JavaScript)

Question

这可能是重复的，无法分辨，我搜索了但找不到方法或答案来避免在这种情况下使用焦点和 JavaScript 时页面滚动。

我正在编写一个在数据库中搜索的小工具，为了使其更加用户友好，我添加了“显示建议”功能。因此，当用户在搜索框中键入内容并找到匹配项时，它会显示一个包含建议的下拉菜单。我的一个 friend 让我为这个下拉列表添加键盘支持(就像一个 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";				
			}
	}	
}

body{
	font-family:Arial, sans-serif;
	max-width:960px;
	margin:2em;
}

.short-parr{
	max-width:450px;
}

#navlist {
  display:none;
}

<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>

Answer 1

您可以简单地添加阻止默认值:

function tabnav(event){
  event.preventDefault();
  .

当然要把它插入到'case arrow down/up' 否则你根本不会有任何输入