Как удалить фокус на поле формы, когда пользователь нажимает клавишу со стрелкой вверх или вниз?

Question

У меня есть веб-страница с автофокусом поля формы поиска. Я хочу удалить фокус на поле формы, когда пользователь нажимает клавишу со стрелкой вверх или вниз, чтобы он мог прокручивать страницу вниз, не щелкая нигде на странице. Прекрасным примером такого UX является www.quora.com. Как мне это сделать?

Я попытался сделать это:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#search").blur(); 
    }); 
</script> 

Но, это только удаляет фокус сразу же после загрузки страницы. Как я могу потерять фокус только тогда, когда пользователь нажимает клавиши со стрелками вверх или вниз?

Мой HTML поле формы выглядит следующим образом:

<div class="input-group"> 
    <input class="form-control" id="search" placeholder="" autocomplete="off" type="text" style="border-right:0" autofocus> 
    <span class="input-group-addon search-addon"><span class="glyphicon glyphicon-search"></span></span> 
</div> 

Answer 1

попробовать это JQuery:

С autofocus

$(function(){ 
    $('#search').keydown(function (e) { 
     var code = (e.keyCode ? e.keyCode : e.which); 
      if(code==38 || code==40){ 
      $(this).focusout(); 
     } 

    }); 
}); 

Без autofocus

$(function(){ 
    $(document).keyup(function (e) { 
     var code = (e.keyCode ? e.keyCode : e.which); 
      if(code!=38 && code!=40){ 
      $('#search').focus(); 
     } 

    }); 
}); 

Стрелка вверх: 38

Стрелка вниз: 40

Вы должны обрабатывать keyup событие пользователя.

Форма:

<div class="input-group"> 
    <input class="form-control" id="search" placeholder="" autocomplete="off" type="text" style="border-right:0"> 
    <span class="input-group-addon search-addon"><span class="glyphicon glyphicon-search"></span></span> 
</div>