javascript - 如何避免 MSIE 滚动表溢出 : hidden;

Question

通过使用

overflow: hidden;

在表容器上。 如果我通过按 Tab 键进入列输入字段，在 MSIE 上它会将焦点列滚动到视口(viewport)中。我想关闭此功能并使其类似于 FF，但它保持固定。

编辑:我刚刚认识到，如果该列完全不可见，FF 会做同样的事情，即使该列被部分剪裁，MSIE 也会这样做。

编辑:欢迎使用任何 javascript 解决方案。像“preventdefault”之类的东西，但我不知道要 Hook 什么事件。

#Container {
  width: 400px;
  overflow: hidden;
}

<div id="Container">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Tab</th>
        <td>
          <input type='text' />
        </td>
        <td>
          <input type='text' />
        </td>
        <td>
          <input type='text' />
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

正如@GyumFox 所指出的，这是浏览器在聚焦时(实际上是在键入时)将 input 置于 View 中的默认行为。

您可以做的是，使用 Javascript 重置滚动条或禁用超出表格边界的 input。

选项 1:(重置滚动条)

这在 Chrome 和 Firefox 中运行良好，但在 IE 中会出现闪烁。

fiddle 1:http://jsfiddle.net/eg0ae5cg/1/

片段 1:

$("#Container").on("scroll", function() {
    $(this).scrollLeft(0);
});

#Container {
    table-layout: fixed; width: 400px; overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Container">
  <table>
    <thead>
      <tr>
        <th></th><th>A</th><th>B</th><th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Tab</th>
        <td><input type='text' /></td>
        <td><input type='text' /></td>
        <td><input type='text' /></td>
      </tr>
    </tbody>
  </table>
</div>

选项 2:(禁用越界输入)

这是一个粗略的例子。您需要根据需要对此进行微调。

* fiddle 2:http://jsfiddle.net/pkb2t127/1/ *

片段 2:

var $tab = $("#Container"), 
    $txt = $tab.find("input"),
    w = $tab.width();

$txt.each(function() {
    var lft = $(this).position().left, 
        rgt = lft + $(this).width();
    
    if (rgt >= w) { $(this).prop("disabled", true); }
})

#Container {
    table-layout: fixed; width: 400px; overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Container">
  <table>
    <thead>
      <tr>
        <th></th><th>A</th><th>B</th><th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Tab</th>
        <td><input type='text' /></td>
        <td><input type='text' /></td>
        <td><input type='text' /></td>
      </tr>
    </tbody>
  </table>
</div>

您可以使用 readonly 属性，而不是 disabled 属性，以将输入值保留在表单发布中。