在文本区域上使用“resize: None;” 是糟糕的用户体验

Catalin Rosu:

有时您需要键入包含许多段落的长回复，并且在小型文本区域框内换行该文本会使您在键入时难以理解和跟踪。有很多次我不得不例如在 Notepad++ 中编写该文本，然后将整个回复粘贴到该小型文本区域中。我承认我也打开了 DevTools 来覆盖 resize: none 声明，但这并不是真正提高效率的方法。

删除 <textarea> 的默认可调整大小性通常会损害用户体验。即使调整大小的文本区域“破坏”了网站布局，那也没关系，用户现在正在此网站上尝试执行非常重要的操作，您不应该让任何事情妨碍此操作。我知道网络是一个很大的地方，所以请随时在评论中证明我错了。

这对于 Catalin 来说一定很有意义，他凭借近 10 年前关于如何防止文本区域调整大小的答案，在 Stack Overflow 上稳步赢得了声誉。

直接链接 →

Alex McCabe

# 2020年1月31日

我同意 none 不好，但我认为 resize: vertical 绝对没问题。它允许调整大小，而不会以奇怪和意外的方式（理论上）破坏您的设计。

您对自动高度扩展输入有什么想法？

Wisani

# 2020年1月31日

取决于您正在构建什么。我认为好的文本区域的大小与其字符限制相匹配。

Mark Praschan

# 2020年1月31日

为什么当用户需要额外空间时我们不让用户调整大小，但通过计划它，我们可以保持外观美观。这是我的看法： https://codepen.io/markpraschan/pen/BaygPdV?editors=1100

Jelle

# 2020年2月4日

我承认，我确实偶尔会使用 resize: none，但始终与使文本区域在文本不再适合时变长的 JavaScript 结合使用。

document.addEventListener("DOMContentLoaded", function(event) {
  function OnInput() {
    this.style.height = "auto";
    this.style.height = (this.scrollHeight) + "px";
  }
  var tx = document.getElementsByTagName("textarea");
  for (var i = 0; i < tx.length; i++) {
    tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
    tx[i].addEventListener("input", OnInput, false);
  }
});

在某种程度上，我认为它比让用户手动执行要好一些。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。