[英]Keyboard up and down arrows
我有一個自動完成搜索,通過鍵入幾個字符,它將顯示所有名稱,與輸入的字符匹配。 我使用DIV標簽在jsp中填充這些數據,使用鼠標我可以選擇名稱。 但我想使用鍵盤向上和向下箭頭選擇要在DIV標簽中選擇的名稱。 任何人都可以幫助我解決這個問題。
使用onkeydown
和onkeyup
事件檢查結果div中的按鍵事件:
var UP = 38;
var DOWN = 40;
var ENTER = 13;
var getKey = function(e) {
if(window.event) { return e.keyCode; } // IE
else if(e.which) { return e.which; } // Netscape/Firefox/Opera
};
var keynum = getKey(e);
if(keynum === UP) {
//Move selection up
}
if(keynum === DOWN) {
//Move selection down
}
if(keynum === ENTER) {
//Act on current selection
}
復制並粘貼這段代碼並嘗試..
<style>
div.active{
background: lightblue
}
</style>
<center>
<input type="text" id="tb">
<div id="Parent" style="position:absolute;display:block;left:428px; width:146px;top:38px; height:100px; border: 2px solid lightblue; overflow:auto;">
<div id="childOne">1 </div>
<div id="childOne">2 </div>
<div id="childOne">3 </div>
<div id="childOne">4 </div>
<div id="childOne">5 </div>
<div id="childOne">6 </div>
<div id="childOne">7 </div>
<div id="childOne">8 </div>
<div id="childOne">9 </div>
<div id="childOne">10 </div>
</div>
</center>
<script type="text/javascript">
var scrolLength = 19;
function autocomplete( textBoxId, containerDivId ) {
var ac = this;
this.textbox = document.getElementById(textBoxId);
this.div = document.getElementById(containerDivId);
this.list = this.div.getElementsByTagName('div');
this.pointer = null;
this.textbox.onkeydown = function( e ) {
e = e || window.event;
switch( e.keyCode ) {
case 38: //up
ac.selectDiv(-1);
break;
case 40: //down
ac.selectDiv(1);
break; }
}
this.selectDiv = function( inc ) {
if(this.pointer > 1){
scrollDiv();
}
if(this.pointer == 0)
document.getElementById("Parent").scrollTop = 0;
if( this.pointer !== null && this.pointer+inc >= 0 && this.pointer+inc < this.list.length ) {
this.list[this.pointer].className = '';
this.pointer += inc;
this.list[this.pointer].className = 'active';
this.textbox.value = this.list[this.pointer].innerHTML;
}
if( this.pointer === null ) {
this.pointer = 0;
scrolLength = 20;
this.list[this.pointer].className = 'active';
this.textbox.value = this.list[this.pointer].innerHTML;
}
}
function scrollDiv(){
if(window.event.keyCode == 40){
document.getElementById("Parent").scrollTop = scrolLength;
scrolLength = scrolLength + 19;
}
else if(window.event.keyCode == 38){
scrolLength = scrolLength - 19;
document.getElementById("Parent").scrollTop = scrolLength;
}
}
}
new autocomplete( 'tb', 'Parent' );
</script>
我假設你有一個處理輸入的輸入。
映射onkeyup-eventhandler,用於輸入event.keyCode的輸入,當它是上/下箭頭(38,40)的相應鍵碼時執行操作,以保持對哪個節點(div中的項目)的引用將重點轉移到。
然后在你點擊Enter(keyCode 13)時調用相同的處理程序。
很難給出一個編碼示例,因為它高度依賴於上下文,但是如何在div中導航的提示是使我們使用.nextSibling和.previousSibling,以及.firstChild和.childNodes。
我做了很久以來,但我想你可以使用event.keyCode
。
如果返回的值是38和40,則用戶分別按下向上和向下箭頭。
然后,您必須選擇當前位置上方或下方的行。 如何選擇行將取決於您的具體情況。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.