如何在Jquery Mobile中定义文本区域的高度和宽度?

时间:2012-08-09 09:54:45

标签: jquery jquery-mobile jqueryform

在输入之前,输入字段是预定义的大小(屏幕宽度上的两行).. :(它没有采取任何我在行和列中定义的值。 例如: 仍然输入的数字是固定的...显示没有变化。

渐渐地,随着我们介绍文本,输入字段的高度增加,以查看整体介绍的文本。

但我需要的是定义我自己的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>

5 个答案:

答案 0 :(得分:5)

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

你可以使用cols&amp;行属性......

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

或设置宽度&amp;高度直接......

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

我建议给textarea一个ID并使用它作为选择器,因为上面显然会影响页面上的所有textarea元素。

答案 1 :(得分:2)

如果我需要预设textarea的大小,我会在HTML中声明大小:

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

答案 2 :(得分:1)

这已在此处回答:JQuery Mobile textarea: how does it use 'rows' attribute?

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

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

答案 3 :(得分:0)

试试这个..

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

<强> FIDDLE

答案 4 :(得分:0)

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

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

并完成所有操作:)