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>

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

1 个答案: