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

我有一个搜索表单字段自动聚焦的网页。当用户按下向上或向下箭头键时，我想移除表单字段上的焦点，这样他就可以向下滚动页面而无需单击页面上的任何位置。这种用户体验的一个完美例子是www.quora.com。我该怎么做

我尝试过这样做：

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

$（文档）.ready（函数（）{
$（“#搜索”）.blur（）；
});

但是，它只是在页面加载后立即移除焦点。如何使其仅在用户按下向上或向下箭头键时失去焦点

我的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>

试试这个jQuery：

使用

自动对焦

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

  });
});

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

  });
});

没有自动对焦

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

  });
});

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

  });
});

向上箭头：38

向下箭头：40

您必须处理用户的

keyup

事件

表格：

请发布到目前为止您尝试过但不起作用的代码。使用jQuery键。按arrow up 33和arrow down34@JamesMontagne：我已经添加了代码。@user2655764发布您的

html搜索表单

如果我按两次向下箭头按钮，它就会工作。也许是因为它是钥匙。当用户第一次按下向上或向下箭头时，如何使其工作？@user2655764可能是用户第一次按下用于聚焦搜索框，第二次按下用于其他事件。第一次按下时，您应该将此

$（“#myInput”）

替换为

$（文档）

@user2655764给出您的网站url或post搜索表单html