-1

検索フォーム フィールドのオートフォーカスを備えた Web ページがあります。ユーザーが上下の矢印キーを押したときにフォームフィールドのフォーカスを外して、ページのどこかをクリックせずにページを下にスクロールできるようにしたいと考えています。この種の 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>
4

1 に答える 1

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>
于 2013-11-09T06:54:33.490 に答える