更改文本区域的高度和宽度答案

【问题标题】：Change the height and width of text area更改文本区域的高度和宽度
【发布时间】：2014-09-19 14:10:22
【问题描述】：

我需要更改 HTML 的 <textarea> 标签的宽度和高度，我需要它两行（行）。目前，它只有一条线。知道如何解决这个问题吗？

对于宽度，即使我将其更改为 1000px 也没有任何变化，我不明白为什么。

<div>
    <textarea rows="2" cols="200" disabled="disabled" style="width:500px; height: 10px;">
        Date
        User 
    </textarea>
</div>

我在 MVC5 应用程序中使用 Bootstrap。

【问题讨论】：

您确定两行（每行最多 200 个字符）是正确的方法吗？两个input 元素可能比两个textarea 元素更好。并且将高度设置为小于正常字体大小的值可以预期以使该区域仅高一行。

标签： html css asp.net twitter-bootstrap textarea

【解决方案1】：

删除textarea上的高度声明，只需使用rows="2"指定行

<textarea rows="2" cols="200" disabled="disabled" style="width:500px;">
Date
User 
</textarea>

height 将与 rows 冲突，width 将与 cols 冲突。

【讨论】：

在这种情况下，请发布您的完整代码，因为您有与之冲突的内容。在这个 JSFiddle 你可以看到它在工作：jsfiddle.net/6npu7/1
-谢谢，我在代码中发现了一些冲突，但对于宽度，我没有找到为什么我不能给它超过 cols=200，这是什么原因，知道吗？跨度>

【解决方案2】：

尝试这样做：

<textarea rows="2" cols="200" disabled="disabled" style="width:500px !important;height:250px !important;">
Date
User 
</textarea>

PS : 将 height:250px 替换为你想要的高度

【讨论】：

您不应该使用!important 覆盖样式，因为它可以通过rows 或cols 轻松指定，或者只需删除它们。
但是浏览器添加的样式不能删除

【解决方案3】：

如果您想根据大小设置文本区域的高度，请继续阅读内容

<textarea  id ="code" rows="2" cols="200" disabled="disabled" style="width:100%; height:auto"  >
    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    </body>
    </html>

    </textarea>

然后在 Document ready 中指定文本区域的高度 = 滚动大小

$(document).ready(function(){

  textAreaAdjust(document.getElementById('code') );
});

function textAreaAdjust(o) {
  o.style.height = "1px";
  o.style.height = (o.scrollHeight)+"px";
}

【讨论】：