javascript - キーボードの上下矢印

Question

オートコンプリート検索が 1 つあり、数文字を入力すると、入力した文字に一致するすべての名前が表示されます。DIV タグを使用して jsp にこのデータを入力しています。マウスを使用して名前を選択できます。しかし、キーボードの上下矢印を使用して選択する DIV タグ内の名前を選択したいと考えています。誰でもこれから私を助けてくれませんか。

Answer 1

このコードをコピーして貼り付けて、試してください..

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

Answer 2

入力を処理する入力があると仮定します。

event.keyCode を読み取った入力に onkeyup-eventhandler をマップし、上下矢印 (38、40) の適切なキーコードであるときに何かを実行して、どのノード (div 内のアイテム) への参照を保持するかにフォーカスを移動します。

次に、Enter キーを押したときに (keyCode 13)、onclick と同じハンドラーを呼び出します。

コンテキストに大きく依存するため、コーディング例を示すのは困難ですが、div をナビゲートする方法のヒントは、.nextSibling と .previousSibling、および .firstChild と .childNodes を使用することです。

Answer 3

これをやってから長い時間が経ちましたが、使用できると思いますevent.keyCode。

返された値が 38 と 40 の場合、ユーザーはそれぞれ上矢印と下矢印を押しています。

次に、現在の位置の上または下の行を選択する必要があります。行を選択する方法は、特定の状況によって異なります。