javascript - 当用户按下向上或向下箭头键时，如何移除表单字段的焦点？

Question

我有一个自动聚焦搜索表单字段的网页。当用户按下向上或向下箭头键时，我想删除表单字段上的焦点，以便他可以向下滚动页面而无需单击页面上的任何位置。这种用户体验的一个完美例子是 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>