如何聚焦从屏幕外滑入的输入？

我有一个元素（#cols），它比<body>宽3倍。它有3列，每列都和<body>一样宽。单击按钮将#cols元素滑动一列的宽度，同时将<input>聚焦在滑动到视图中的列中：

http://jsbin.com/puhurakewa/1/edit?html，css，js，输出

正如您在演示中看到的那样，问题在于关注输入会导致奇怪的行为。我相信浏览器说，

"Crap，用户关注屏幕外的输入。我需要显示它！"

然后神奇地将输入滚动到视图中。这打破了过渡。

有没有办法禁用这种行为？这是极不可取的。我在Mac上的Chrome、Safari和Firefox中都注意到了这一点。

编辑：谢谢你到目前为止的回答。我应该更具体地回答我的问题。我知道我可以通过等待动画结束来"解决"这个问题，但我好奇的是如何通过处理这个问题并立即集中输入。这是一种更好的体验，因为用户可以在过渡结束之前开始打字。

在转换结束后添加焦点事件

 $('#cols').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
      $input.focus();
  });

JSbin演示

由于您已经使用了Jquery，还不如利用animate方法，然后将输入集中在完整的函数上，有关更多信息，请查看文档

以下是JS（这非常有效，但如果你愿意的话，可以花一些时间整理/重构）：

$(document).ready(function () {
  $('button').on('click', function () {
  var colId = $('.showing').attr('id');
    if(colId == "col-1"){
      $('#cols').animate({
          right: '200px'
      }, 1000, "swing", function(){
          $("#col-2").find('input').focus();
          $('#col-1').removeClass('showing');  
          $('#col-2').addClass('showing');              
      });
    }
    else if(colId == "col-2"){
      $('#cols').animate({
          right: '400px'
      }, 1000, "swing", function(){
          $("#col-3").find('input').focus();
          $('#col-2').removeClass('showing');  
          $('#col-3').addClass('showing');                    
      });          
    }
    else if(colId == "col-3"){
      $('#cols').animate({
          right: '0px'
      }, 1000, "swing", function(){
          $("#col-1").find('input').focus();
          $('#col-3').removeClass('showing');  
          $('#col-1').addClass('showing');                    
      });          
    }
  });
});

然后将您的CSS更改为相对位置，如下所示：

#cols {
  height: 100%;
  transition: transform 400ms;
  white-space: nowrap;
  width: 600px;
  position:relative;
}

HTML（只需在第一列中添加"显示"类）：

<body>
   <button>Shift Cols & Focus Input</button>
   <div id="cols" col-to-show="1" >
      <div class="col showing" id="col-1">
        <input type="text" value="1" />
      </div>
      <div class="col" id="col-2">
        <input type="text" value="2" />
      </div>
      <div class="col" id="col-3">
        <input type="text" value="3" />
      </div>
  </div>
</body>

这是一个小提琴

神奇地将输入滚动到视图中

这是关键。聚焦后，只需将容器的scrollLeft更改为0即可。不过我不得不把它包起来。

http://jsbin.com/danarucama/1/edit?html，css，js，输出

相关内容

最新更新

热门标签：