Jquery Mobile中如何定义文本区域的高度和宽度？答案

【问题标题】：How to define the height and width of the text area in Jquery Mobile?Jquery Mobile中如何定义文本区域的高度和宽度？
【发布时间】：2012-08-09 09:54:45
【问题描述】：

在输入之前，输入字段是预定义的大小（屏幕宽度上的两行）..:(它没有采用我在行和列值中定义的任何内容.. 前任：输入字段仍然是固定的...显示没有变化。

随着我们引入文本，输入字段的高度逐渐增加，以查看整个引入的文本。

但我需要的是定义我自己的 textfeild 的高度和宽度......如果输入的文本更多，那么 feild 应该逐渐增加。

我使用的代码是：

<div data-role="content">
<form method="post" name="login" data-ajax="false">
<label for="textarea"><h3><u>Add Comment</u> : </h3></label>
<textarea cols="8" rows="50" name="textarea" id="comment">
</textarea>
</form>
<div>

【问题讨论】：

标签： jquery jquery-mobile jqueryform

【解决方案1】：

有几种方法可以做到这一点。

您可以使用 cols & rows 属性...

$("textarea").attr("rows", 20);
$("textarea").attr("cols", 25);

或者直接设置宽高...

$("textarea").height(200);
$("textarea").width(250);

我建议给 textarea 一个 ID 并将其用作选择器，因为上述内容显然会影响页面上的所有 textarea 元素。

【讨论】：

【解决方案2】：

如果我需要预设文本区域的大小，我会在 HTML 本身中声明大小：

<textarea id="Summary" style="height:100px; width:250px"></textarea>

【讨论】：

【解决方案3】：

这里已经回答了这个问题：JQuery Mobile textarea: how does it use 'rows' attribute?

简而言之，将 !important 标志添加到您的 CSS 项目中。

.custom_class {
  height: auto !important; /* !important is used to force override. */
}

【讨论】：

【解决方案4】：

试试这个..

$("textarea#comment").css({'height':'100px', 'width':'250px'});

FIDDLE

【讨论】：

@SuryaBadami 你检查过小提琴吗？

【解决方案5】：

jQuery mobile 会自动将类“.ui-input-text”附加到 textarea
然后高度将设置为 50px（在我的 jQuery 移动版本中）
所以我们需要做的是在您的 CSS 文件中进行设置：

textarea.ui-input-text { height: inherit }

一切都完成了:)

【讨论】：