Question

目标：
隐藏文本框（）而不使用css＆＃39; s＆＃34; visibility：none;＆＃34;它不应占用任何空白行。

问题：
不知道有什么好的解决方案。

的信息：
*该代码仅适用于EE和Chrome *尝试显示：无，可见性：无和可见性：隐藏但无法完成目标。

＆＃34; https://jsfiddle.net/yszq53jm/16/＆＃34;

＆＃13;

document.querySelector('p').addEventListener('mouseup', function(ev) {
  var test = document.querySelector('.lame');
  var bkp = test.value;
    
  test.select();
  document.execCommand('cut');
  test.value = bkp;
});

＆＃13;

.lame {
    z-index: -1;
    opacity: 0;
}

textarea:not(.lame) {
    width: 100%;
    height: 60px;
}

＆＃13;

<p style="cursor: pointer;">
    link
</p>
<textarea class="lame">
<table>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</table>
</textarea>

<textarea></textarea>

＆＃13;

Answer 1

假设您的意图是模仿display: none（元素不可见，布局中没有为其保留空间），您可以尝试将元素高度设置为0并从中删除所有填充/边框。因此，您可以将.lame的CSS更改为：

＆＃13;

document.querySelector('p').addEventListener('mouseup', function(ev) {
  var test = document.querySelector('.lame');
  var bkp = test.value;
    
  test.select();
  document.execCommand('cut');
  test.value = bkp;
});

＆＃13;

.lame {
    background: transparent;
    border: none;
    display: block;
    height: 1px;
    outline: none;
    padding: 0;
    resize: none;
}
textarea:not(.lame) {
    width: 100%;
    height: 60px;
}

＆＃13;

<p style="cursor: pointer;">link</p>
<textarea class="lame">
    <table>
        <tr>
            <td>a</td>
            <td>a</td>
            <td>a</td>
        </tr>
    </table>
</textarea>
<textarea></textarea>

＆＃13;

希望这有帮助！如果您有任何问题，请告诉我。

编辑：我现在修改了CSS，因此内容仍然可以调焦，因为当高度为0时，无法正确选择内容。

如何在不使用Visibility的情况下隐藏TextBox：none

1 个答案: