Question

这里有一个我的页面的小例子。我需要禁用所有输入字段，但滚动条。这适用于Chrome和Firefox，但不适用于IE。

＆＃13;

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

＆＃13;

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

＆＃13;

有什么建议吗？

Answer 1

也许是这样的？

＆＃13;

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

＆＃13;

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

＆＃13;

或者使用pointer-events（用户仍然可以在输入中进行制表，但tabindex="-1"可以阻止这种情况，但是，为什么不再添加disabled）

＆＃13;

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

＆＃13;

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

＆＃13;

或者使用额外的div

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我建议将字段集包装在一个额外的div中并在那里应用你的样式。 IE似乎禁用了禁用元素上的滚动条功能。

.box {
  display: inline-block;
  height: 80px; overflow-y: scroll;
}

<div class="box">
<fieldset disabled>
<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>

IE11 - 如何在禁用的字段集

2 个答案: