添加填充使文本区域输入在某些 OS 上不可见

Question

我有这个文本区域，它在聚焦时会获得一些样式。

<textarea id="msg" rows="4" name="msg" placeholder="Your message.."></textarea>

其中一种样式是 padding

#msg:focus {
    padding-bottom: 150px;
}

虽然这在 Windows 10、Mac 和 Android 以及 Firefox、Edge、Chrome 和 Opera 上的效果很好，但有一个问题 在所有基于 debian 的机器上的 Firefox 中 我测试过并且 显然也在 pre-Windows-10 上（见评论）。在应用填充的那一刻，所有文本都消失了，但它只是不可见的，因为如果您继续键入，文本将被键入并且可以被复制或剪切。如果您禁用填充，它也会立即出现。

如果您想自己查看整个表格：https://neurotactics.de/contact

Answer 1

我认为这与属性 box-sizing、height 和 padding[= 的组合有关34=] 应用于您的 textarea.

box-sizing: border-box - 宽度和高度属性（以及 min/max 属性）包括内容、填充和边框

因此，如果您的文本区域具有 height: 64px 和 padding-bottom: 150px 焦点，则没有 space 剩余的内容，因此它可能会导致在 firefox 上出现此行为。

我建议使用 属性 min-height 属性 而不是 padding.
的不同方法 例如，您的文本区域可以默认将最小高度设置为 0，因此应用高度 属性：

#msg {
    height: 64px;
    min-height: 0;
}

并且在焦点上，增加最小高度以覆盖高度 属性:

#msg:focus {
    min-height: 150px;
}