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

【问题标题】：How can I focus an input that's sliding in from off the screen?如何聚焦从屏幕滑入的输入？
【发布时间】：2015-03-04 06:45:44
【问题描述】：

我有一个元素 (#cols)，它比 <body> 宽 3 倍。它有 3 列，每列的宽度与<body> 完全相同。单击按钮会将#cols 元素滑动一列的宽度，同时将<input> 聚焦在滑动到视图中的列中：

http://jsbin.com/puhurakewa/1/edit?html,css,js,output

从演示中可以看出，问题在于聚焦输入会导致奇怪的行为。我相信浏览器会说，

“废话，用户关注了屏幕外的输入。我需要显示它！”

然后神奇地将输入滚动到视图中。这会中断过渡。

有没有办法禁用这种行为？这是非常不可取的。我在我的 Mac 上的 Chrome、Safari 和 Firefox 中发现了它。

编辑：感谢您到目前为止的回答。我应该更具体地回答我的问题。我知道我可以通过等待动画结束来“解决”这个问题，但我很好奇的是如何解决这个问题并立即关注输入。这是一种更好的体验，因为用户可以在转换结束之前开始输入。

【问题讨论】：

“这是一种更好的体验，因为用户可以在转换结束之前开始输入。” -- 我的想法完全正确。不过我很好奇，你现在解决了吗？我现在也面临同样的问题（当然，如果我想出解决方案，我会立即发布）。
@JohnWhite 不，我只是放弃了滑动过渡。

标签： javascript html css onfocus

【解决方案1】：

在过渡结束后添加焦点事件

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

JSbin Demo

【讨论】：

【解决方案2】：

既然您已经在使用 Jquery，不妨利用 animate 方法，然后在您关注输入的完整功能上，更多信息请查看docs

继承人的 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>

这是fiddle

【讨论】：

对不起，我知道你用过 JSBin，但我更喜欢小提琴 :)

【解决方案3】：

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

这是关键。聚焦后将容器的scrollLeft改为0即可。不过我不得不在它周围加上一个包装器。

http://jsbin.com/danarucama/1/edit?html,css,js,output

【讨论】：