Доступ к содержимому Div с помощью клавиш со стрелками вверх и вниз с использованием JavaScript - PullRequest
Новая
       14

Доступ к содержимому Div с помощью клавиш со стрелками вверх и вниз с использованием JavaScript

1 голос
/ 31 декабря 2008

У меня есть тег Div, который содержит 4 дочерних тега Div 

 
   <Div id="Parent">
     <div id="childOne">ChildOne &lt/div>
     <div id="childOne">ChildTwo &lt/div>
     <div id="childOne">ChildThree &lt/div>
     <div id="childOne">ChildFour &lt/div>
  &lt/Div>

Теперь я хотел бы получить доступ к этим элементам Div с помощью клавиш со стрелками вверх и вниз через Javascript. Приведенный выше div - это показ по щелчку TextBox. Я хочу, чтобы пользователь мог выбрать любой дочерний div, и его выбранное значение появится в TextBox. Я получил конечный результат с помощью события attachinh onClick для каждого childDiv.

Ответы [ 4 ]

5 голосов
/ 31 декабря 2008

Вот бесплатное библиотечное решение, с которого можно начать.

Возможно, вы захотите добавить события, которые скрывают и показывают div, когда текстовое поле получает или теряет фокус. Возможно, [esc] следует отменить выбор? (Я не проверял это в ie) 

<style>div.active{ background: red }</style>

<input type="text" id="tb">

<div id="Parent">
     <div id="childOne">ChildOne </div>
     <div id="childOne">ChildTwo </div>
     <div id="childOne">ChildThree </div>
     <div id="childOne">ChildFour </div>
</div>
<script type="text/javascript">


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 !== 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;
            this.list[this.pointer].className = 'active';
            this.textbox.value = this.list[this.pointer].innerHTML;
        }
    }
} 

new autocomplete( 'tb', 'Parent' );
</script>
1 голос
/ 31 декабря 2008

Вы ищете то, что известно как автозаполнение или предложения?

0 голосов
/ 31 декабря 2008

Вы определенно ищете 'Autosuggest / Autocomplete'. Это требует много времени для полной реализации, если вы хотите сделать это в чистом javascript, но да, вы можете использовать пример из strager для начала.

Я рекомендую использовать JQuery . JQuery имеет очень хороший плагин для автозаполнения , который вы можете использовать. Я только что реализовал в одном из моих проектов пару дней назад, и, кажется, он работает нормально.

Есть важное высказывание, которое вы должны помнить при создании программного обеспечения: «Не пытайтесь заново изобретать колесо».

Если другие программисты уже сделали это, и они любезны поделиться, использовать это и поблагодарить их.

Ура! * * 1013

0 голосов
/ 31 декабря 2008

Что значит "получить к ним доступ с помощью клавиш со стрелками"? В каждом элементе div есть текст ... они не содержат элементов взаимодействия, поэтому клавиатура здесь неактуальна. Может быть, вам нужно уточнить свой вопрос?

...