Javascript: переход по списку DIV с помощью клавиатуры

Мне бы хотелось иметь список DIV, на котором пользователь может перемещаться, нажимая клавиши курсора вверх/вниз и получая событие, когда он изменяет текущий DIV, как это происходит в Google Мгновенные результаты. Знаете ли вы, есть ли компонент jQuery/JS для его достижения или какие-либо предложения по использованию компонентов.Javascript: переход по списку DIV с помощью клавиатуры

Спасибо!

источник

2011-07-27 Mike

Просьба уточнить немного. Что такое div? Вы имели в виду список внутри погружения? Вы можете использовать onchange и onkeypressed атрибуты для достижения чего-то вроде того, о чем вы говорите, что бы вы ни говорили. – mowwwalker

Я имею в виду список DIV, один за другим.

... я хотел бы иметь возможность выбрать один, затем, нажав клавишу со стрелкой вниз, чтобы выбрать следующее. – Mike

Вы хотите выделить контент? – mowwwalker

Редактировать

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

End Edit

Я только написал это для вас. Я надеюсь, что вы сможете его использовать: http://jsfiddle.net/Paulpro/evBkC/8/ . С помощью CSS можно легко изменить стиль так, как вам хочется. Он выделяет div onclick и обнаруживает клавиши со стрелками вверх и вниз, если поле ввода имеет фокус. Он отслеживает индекс selectedDiv в переменной с именем selectedDiv, поэтому вы можете использовать ее, если хотите. Он должен быть полностью перекрестно-браузером, как и IE 5.5, по крайней мере, и всеми другими основными браузерами.

HTML:

<div id="nav"> 
    <input type="text" /> 
    <div>Line 1</div> 
    <div>Line 2</div> 
    <div>Line 3</div> 
    <div>Line 4</div> 
    <div>Line 5</div> 
    <div>Line 6</div> 
</div>

CSS:

#nav, #nav input{ 
    width: 300px; 
} 

#nav div{ 
    width: 150px;  
    margin-left: 75px; 
    border-right: 1px solid #000; 
    border-bottom: 1px solid #000; 
    border-left: 1px solid #000; 
    cursor: pointer; 
}

Javascript:

var divs = document.getElementById('nav').getElementsByTagName('div'), 
selectedDiv = 0, 
i; 

for(i = 0; i < divs.length; i++){ 
    divs[i].onmouseover = (function(i){ 
     return function(){ 
      divs[selectedDiv].style.backgroundColor = ''; 
      selectedDiv = i; 
      divs[selectedDiv].style.backgroundColor = '#68F'; 
     } 
    })(i); 

    divs[i].onclick = function(){ 
     document.getElementById('nav'). 
      getElementsByTagName('input')[0].focus(); 
     document.getElementById('nav'). 
      getElementsByTagName('input')[0].value = 
      (this.innerText || this.textContent); 
    }; 
} 

divs[selectedDiv].style.backgroundColor = '#68F'; 

document.getElementById('nav'). 
    getElementsByTagName('input')[0].onkeydown = function(e){ 
    var x = 0; 
    if(e.keyCode == 38) 
     x = -1; 
    else if(e.keyCode == 40) 
     x = 1; 
    else 
     return; 
    divs[selectedDiv].style.backgroundColor = ''; 
    selectedDiv = ((selectedDiv+x)%divs.length); 
    selectedDiv = selectedDiv < 0 ? 
     divs.length+selectedDiv : selectedDiv; 
    document.getElementById('nav'). 
     getElementsByTagName('input')[0].value = 
     (divs[selectedDiv].innerText || divs[selectedDiv].textContent); 
    divs[selectedDiv].style.backgroundColor = '#68F'; 
}; 

document.getElementById('nav'). 
    getElementsByTagName('input')[0].focus();

источник

2011-07-27 07:45:40 Paulpro

http://jsfiddle.net/uEBSV/ Я думаю, он хочет, чтобы он хотел выбрать текст. – mowwwalker

@ user828584 Я думаю, что у меня есть так, как он хотел сейчас: http://jsfiddle.net/Paulpro/evBkC/8/ – Paulpro

Большое спасибо за это, но я хотел бы избежать использования окна ввода, возможно ли это получить onkeyDown без использования inlut текста? – Mike

Кто-то писал:

<script type="text/javascript"> 
    function fnSelect(objId) { 
     fnDeSelect(); 
     if (document.selection) { 
     var range = document.body.createTextRange(); 
      range.moveToElementText(document.getElementById(objId)); 
     range.select(); 
     } 
     else if (window.getSelection) { 
     var range = document.createRange(); 
     range.selectNode(document.getElementById(objId)); 
     window.getSelection().addRange(range); 
     } 
    } 


    function fnDeSelect() { 
     if (document.selection) document.selection.empty(); 
     else if (window.getSelection) 
       window.getSelection().removeAllRanges(); 
    } 
    </script> 
<body> 

<div id="test1"> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
</div> 
<div id="test2"> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
</div> 
<a href="javascript:fnSelect('test1');">Select 1</a> 
<a href="javascript:fnSelect('test2');">Select 2</a> 
<a href="javascript:fnDeSelect();">DeSelect</a> 
</body>

Кажется, работает. Я посмотрю на это позже, чтобы посмотреть, как это сделать.

источник

2011-07-27 07:45:02 mowwwalker

Javascript: переход по списку DIV с помощью клавиатуры

ответ

Смежные вопросы