Question

我有一个简单的文本区域，我只想手动换行。

因此，我将css属性 white-space：nowrap 设置为文本区域。

当我为textarea赋予属性只读和已禁用时，手动换行符在Chrome 69上消失了。

这是一个有效的示例：

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
    <title>.</title>
    <style>
    textarea
    {
        width:200px;
        height:100px;
        white-space:nowrap;
    }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () =>
        {
            document.querySelector('button').addEventListener('click', (e) =>
            {
                if( !document.querySelector('textarea').hasAttribute('readonly') )
                {
                    document.querySelector('textarea').setAttribute('readonly','readonly');
                    document.querySelector('textarea').setAttribute('disabled','disabled');
                }
                else
                {
                    document.querySelector('textarea').removeAttribute('readonly','readonly');
                    document.querySelector('textarea').removeAttribute('disabled','disabled');
                }
            });
        });
    </script>
</head>
<body>
    <textarea>this
is
a
multilinemultilinemultilinemultilinemultiline
text</textarea>
    <br/>
    <button>toggle readonly</button>
</body>
</html>

这是我应该向浏览器供应商报告的错误，还是我做错了什么？

Answer 1

您可以使用
white-space: pre而不是white-space: nowrap来强制禁用状态也不换行。

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('button').addEventListener('click', (e) => {
    if (!document.querySelector('textarea').hasAttribute('disabled')) {
      document.querySelector('textarea').setAttribute('disabled', 'disabled');
    } else {
      document.querySelector('textarea').removeAttribute('disabled', 'disabled');
    }
  });
});

textarea {
  width: 200px;
  height: 100px;
  white-space: pre;
}

<textarea>this
is
a
multilinemultilinemultilinemultilinemultiline
text</textarea>
<br/>
<button>Toggle 'disabled'</button>

使用white-space: nowrap的问题是空白序列将折叠成一个空白。每当重绘DOM时，此检查都会刷新，这在单击按钮添加disabled属性时发生。 white-space: pre通过让浏览器保留空白来解决此问题。

注意：readonly对显示没有影响，因此我通过删除此选项简化了答案。

textarea空格nowrap与只读结合使用

1 个答案: