html - IE11 - 如何在禁用的字段集中启用滚动条

Question

这里有一个我的页面的小例子。我需要禁用除滚动条之外的所有输入字段。这在 Chrome 和 Firefox 上完美运行，但不适用于 IE。

tbody{
  display:block;
  height: 50px;
  overflow-y: scroll;
}

<fieldset disabled>
   <table>
      <thead>
          <tr><th>test</th></tr>
      </thead>
      <tbody>
          <tr> <td> <input type="text"/> </td> </tr>
          <tr> <td> <input type="text"/> </td> </tr>
          <tr> <td> <input type="text"/> </td> </tr>
          <tr> <td> <input type="text"/> </td> </tr>
          <tr> <td> <input type="text"/> </td> </tr>
     </tbody>
  </table>  
</fieldset>

有什么建议吗？

Answer 1

大概是这样的？

tbody{
  display:block;
  height: 50px;
  overflow-y: scroll;
}

<fieldset>
  <table>
    <tbody>
      <tr> <td> <input type="text" disabled /> </td> </tr>
      <tr> <td> <input type="text" disabled /> </td> </tr>
      <tr> <td> <input type="text" disabled /> </td> </tr>
      <tr> <td> <input type="text" disabled /> </td> </tr>
      <tr> <td> <input type="text" disabled /> </td> </tr>
    </tbody>
  </table>  
</fieldset>

或者使用 pointer-events(仍然，用户可以在输入中切换，但是可以使用 tabindex="-1" 来阻止，但是话又说回来，为什么不只是添加 disabled)

fieldset tbody {
  display: inline-block;
  height: 50px;
  overflow-y: scroll;
}
fieldset tbody input {
  pointer-events: none;
}

<fieldset>
    <table>
      <tbody>
        <tr> <td> <input type="text" /> </td> </tr>
        <tr> <td> <input type="text" /> </td> </tr>
        <tr> <td> <input type="text" /> </td> </tr>
        <tr> <td> <input type="text" /> </td> </tr>
        <tr> <td> <input type="text" /> </td> </tr>
      </tbody>
    </table>  
</fieldset>

或者使用额外的 div

fieldset div {
  display: inline-block;
  height: 50px;
  overflow-y: scroll;
}

<fieldset>
  <div>
    <table disabled>
      <tbody>
        <tr> <td> <input type="text" /> </td> </tr>
        <tr> <td> <input type="text" /> </td> </tr>
        <tr> <td> <input type="text" /> </td> </tr>
        <tr> <td> <input type="text" /> </td> </tr>
        <tr> <td> <input type="text" /> </td> </tr>
      </tbody>
    </table>  
  </div>  
</fieldset>