javascript — перемещение объектов HTML по нажатию клавиши со стрелкой

Question

javascript — перемещение объектов HTML по нажатию клавиши со стрелкой

Я хочу перемещаться по содержимому div (div с атрибутом id="brand_div"), одновременно нажимая клавиши вверх и вниз, нажмите клавиши.

<input type="text" autocomplete="off" name="brand_search_box"  id="brand_searchterm" placeholder="Select Your Brand"><div id="brand_div" class="c_result" style="display: block;">
<a class="brand_sugg" href="#">
<div class="c_result show">Medicine</div>
</a>

<a class="brand_sugg" href="#">
<div class="c_result show">sandals</div>
</a>

<a class="brand_sugg" href="#">
<div class="c_result show">Dress</div>
</a>
</div>

// OnkeyUp Code

$('#brand_searchterm').on('keyup', function (e) {

var key = $('#brand_searchterm').val();
if (key)
{
if (req)
req.abort();
req = $.ajax({
url: "<?php echo base_url() ?>home/brand_search_sugg",
type: 'POST',
cache: false,
data: {
brand_search: key
},
success: function (data)
{
if (data)
{
$('#loading').css('display', 'none');
$("#brand_div").html(data).show();
if($('#brand_div a:focus').length==0){$('#brand_div a').first().focus();}
if (e.keyCode == 40)
{
$("#brand_div a:focus").next().focus();
}
if(e.keyCode==38)
{
$("#brand_div a:focus").prev().focus();
}
}
}

});
}
});

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

0

javascript jquery keydown php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

window.addEventListener("keydown", function(e) {
// space and arrow keys
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
}, false);

Этот код позволит избежать прокрутки страницы, когда пользователь нажимает стрелку вверх или вниз.

или вы можете сделать вызов AJAX на высоте прокрутки.

Если данные, возвращаемые службой, пусты, вы можете перейти к следующему разделу.

$(document).scroll(function(e){

// grab the scroll amount and the window height
var scrollAmount = $(window).scrollTop();
var documentHeight = $(document).height();

// calculate the percentage the user has scrolled down the page
var scrollPercent = (scrollAmount / documentHeight) * 100;

if(scrollPercent > 50) {
// run a function called doSomething
doSomething();
}

function doSomething() {

// do something when a user gets 50% of the way down my page

}

});

0