textarea 调整宽度而不是高度，为什么？

Question

这是我尝试过的：

<textarea name='text' spellcheck = "true" style="height: 4em; width: 80%;" id="wider"></textarea>

我也尝试过用 px 或 % 设置高度，但这两种方法都不起作用。我还在我的 css 文件中尝试了以下操作（以及在 css 中将高度设置为 %、px 或 em，这也不起作用）：

#wider{
    width: 80%;
    height: auto;
}

我可以使用内联样式命令或 css 调整宽度，没有问题。为什么高度应该不同，我还可以尝试什么？

感谢您的任何建议。

更新：我还尝试在内联和 CSS 样式中设置 rows 属性。我知道内联会否决CSS。我只想要一个能工作。现在，宽度属性始终会进行调整以反映我的更改，但高度始终保持不变。还有什么我应该看的吗？再次感谢！

Answer 1

在本例中，表单中的文本区域隐藏了一个“最小高度”属性。显然，高度的内联样式设置不会覆盖 CSS 文件中的 min-height 属性。

Answer 2

如果您使用内联样式标签，它将优先于 CSS 样式。

height 属性按预期工作： JSfiddle 在这里。

如果您有预期要使用的行数，还可以使用文本区域上的 rows 属性来设置高度。

<textarea name='text' spellcheck="true" id="wider" rows="5"></textarea>

Answer 3

一旦某些父元素改变了自己的尺寸（例如高度），您就可以使用 JavaScript 来调整文本区域的尺寸。您将调用 functios（ES6 Javascript 版本）：

const makeDimensionsEqual = (someTextareaSelector, someParentElementSelector) => {

  document.querySelectorAll(someTextareaSelector)[0].style.height = 
    document.querySelectorAll(someParentElementSelector)[0]
    .getBoundingClientRect().height + "px"

}

const someTextareaSelector = '...' 
const someParentElementSelector = '...'
makeDimensionsEqual(someTextareaSelector, someParentElementSelector)

Answer 4

免责声明：我只能猜测为什么它有效，但它在我的 WordPress 中有效...... 我拔出了头发，试图让文本区域响应 css“高度：自动”调整。偶然间，在尝试输入来自“Moussawi7”的“oninput=”javascript建议时[参见问题https://stackoverflow.com/questions/17772260/textarea-auto-height]，我无法开始工作，我添加了一个绑定到 的 js 监听器来等待 DOM 加载。</p> <p>长话短说，当 DOM 侦听器键入文本区域的 id 时，浏览器显然会等待 DOM 完成加载，然后浏览器完成设置文本区域的所有属性（这是我 100% 的猜测）。但很快！突然，文本区域根据内容调整了自身大小，根本没有 css“高度：”设置。这正是我想要的。</p> <p>这是第一个 js 代码、css 和 html</p> <pre><code>js function auto_grow() { var element = document.getElementById('auto-grow'); // note: function does NOTHING!!! console.log("inside auto_grow") // msg shows in cons after page loads } document.addEventListener('DOMContentLoaded', function () { auto_grow(); }); css .gw-input-content { resize: none; width: 100%; box-sizing:border-box; margin-top: .5rem; white-space: pre-line; /* removes 1st line text indent in firefox */ text-wrap: pretty; /* removes 1st line text indent in chrome */ overflow: hidden; } html <textarea id="auto-grow" class="gw-input-content"> <?php echo esc_textarea(wp_strip_all_tags(get_the_content())); </code></pre> <p>？> </p> <p>信用应得的，chatGPT3.5 然后建议我在 DOM 侦听器中添加另一个侦听器以用于文本区域输入，并添加 Moussawi7 的建议，以便在用户键入换行到新行的文本时使用 js style.height 设置扩展高度或按 Enter 键添加新行。 （我要求聊天帮助我让 Moussawi7 的功能在我的页面上运行。） 无需更改上述 css 或 html。现在，当用户键入添加新行时，文本区域一次扩展一行。</p> <pre><code>function auto_grow() { var element = document.getElementById('auto-grow'); element.style.height = "5px"; // Initial height element.style.height = (element.scrollHeight) + "px"; } document.addEventListener('DOMContentLoaded', function () { auto_grow(); var textarea = document.getElementById('auto-grow'); textarea.addEventListener('input', auto_grow); // Call the function on input }); </code></pre> </answer> <answer tick="false" vote="-1"> <p>这是一个旧的，但如果有人还在寻找这个，请尝试<pre><code>display: inline-table;</code></pre></p> </answer> </body></html>