Question

使用

有意地剪切表格的最后一列而不使用滚动条

overflow: hidden;

表容器上的

。如果我通过按Tab键输入列输入字段，则在MSIE上将聚焦列滚动到视口中。我想关闭此功能，使其与FF保持固定类似。

编辑：我刚认识到如果列完全不可见，FF也会这样做，即使列被部分剪切，MSIE也会这样做。

编辑：欢迎使用任何JavaScript解决方案。像'preventdefault'之类的东西，但我不知道要挂钩的事件。

#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

这是浏览器在聚焦时（实际上在打字时）将input置于视图中的默认行为，正如@GyumFox所指出的那样。

您可以使用Javascript重置滚动或禁用超出桌面范围的input。

选项1：（重置滚动）

这可以在Chrome和Firefox中正常使用，但会在IE中闪烁。

小提琴1：http://jsfiddle.net/eg0ae5cg/1/

代码段1：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

*小提琴2：http://jsfiddle.net/pkb2t127/1/ *

代码段2：

＆＃13;

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); }
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

如何避免MSIE滚动表溢出：隐藏;

1 个答案: