JQuery Mobile textarea：它如何使用“行”属性？答案

【问题标题】：JQuery Mobile textarea: how does it use 'rows' attribute?JQuery Mobile textarea：它如何使用“行”属性？
【发布时间】：2013-10-01 13:13:22
【问题描述】：

我想使用 JQuery Mobile 动态生成具有不同行数的文本区域。我打算为此使用敲除，将数据绑定到rows 属性。

例如这里：http://jsfiddle.net/j7b9A/2/

<label for="textarea-1">5 rows:</label>
<textarea rows="5" name="textarea-1" id="textarea-1"></textarea>

<label for="textarea-2">10 rows:</label>
<textarea rows="10" name="textarea-2" id="textarea-2"></textarea>

但是，JQuery Mobile 似乎忽略了 rows 属性，该属性有据可查：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea，甚至包含在 JQuery Mobile 自己的文档中：http://view.jquerymobile.com/1.3.1/dist/demos/widgets/textinputs/index.html#Textarea。

此处的一条评论指出，设置高度和宽度会覆盖rows 属性：https://stackoverflow.com/a/7194692/1061602。似乎是因为 JQuery Mobile 在 textarea 展开时进行了转换。那么 rows 属性是否总是被完全覆盖？

另一个类似的问题在这里：How to make text area to be height of 10 rows fixed?，但这对我没有帮助，因为我不想固定所有文本区域的高度，我希望它们有所不同，因为它们通常可以使用 rows属性。

我还注意到，我无法解释的是，在我自己的代码中，流氓style="height: 184px;" 被添加到我的一个文本区域，但没有添加到另一个。另一个只是使用 50px 的标准样式，如此答案中突出显示的那样：jQuery Mobile and textarea rows - 这似乎表明还有其他事情发生，但我无法通过简单的小提琴重现这一点。

我快速浏览了 JQuery Mobile 源代码，但我根本看不到 rows 属性正在使用？

为一系列绑定的 JQuery Mobile 文本区域指定行高范围的最佳方法是什么？

【问题讨论】：

knockoutjs的作用是什么？
我正在使用 knockoutjs 将文本绑定到这些 textarea 元素中，因此也希望 data-bind="attr: { 'rows': Rows }"
查看jsfiddle.net/Palestinian/XXEfV
Omar，这给了我我需要的东西（特别是 height:auto 版本），以便能够设置 textarea 的初始高度，同时保持自动增长的响应能力。如果您将其添加为答案，我会接受。谢谢:)
我很高兴它有帮助:)

标签： css jquery-mobile knockout.js textarea

【解决方案1】：

你只需要...添加这个

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

【讨论】：

也适合我。谢谢
是的，这个解决方案效果很好！其他解决方案对我不起作用，在输入空文本区域后，高度再次缩小到 1 行。

【解决方案2】：

jQM 通过添加不同的类来实现响应性和样式设置，从而增强了textarea。保持rows 高度的最快和最简单的方法是重写 jQM 类。

Demo

CSS 解决方案：

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

JS 解决方案 - textarea 增强后设置高度。

setTimeout(function () {
  $('textarea').css({
    'height': 'auto'
  });
}, 0);

【讨论】：

【解决方案3】：

JQuery Mobile 旨在响应迅速，因此在设计上它不会占用空间，直到您需要它。如果您通过输入或通过代码向文本区域添加数据，您可以看到它根据需要增长。

如果您想在它为空时覆盖该大小，您有两种选择：

使用 Omar 提到的方法，即关闭 JQM 角色，就像您在 JSFiddle 示例中所做的那样。
另一个是覆盖默认类as seen in this answer。

【讨论】：

【解决方案4】：

我遇到了同样的问题，我终于找到了解决方案。您可以在 textarea 元素中设置 'data-autogrow="false" '，之后您可以在 css 中设置 rows 属性或高度。它确实适用于 jquery mobile 1.4.0+

【讨论】：

谢谢，这行得通！在 Firefox 和 Chrome 中测试。

【解决方案5】：

文本区域内容在多行时自动滚动。最大高度如你所愿。添加css

 textarea.size{max-height:30px;}

 <textarea name="textarea-1" id="textarea-1" style="max-height:30px;">

【讨论】：

【解决方案6】：

你可以使用这个：data-autogrow="false"
像这样： <textarea rows="10" name="textarea-2" id="textarea-2" data-autogrow="false"></textarea>

【讨论】：