JQuery移动textarea:它如何使用“rows”属性？

Question

我想用JQuery移动动态生成具有不同行数的文本区域。我打算为此使用敲除，数据绑定到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移动似乎忽略了rows属性，这个属性有很好的文档说明：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea，甚至包含在JQuery移动自己的文档中：http://view.jquerymobile.com/1.3.1/dist/demos/widgets/textinputs/index.html#Textarea。

此处的注释指出，设置高度和宽度将重写rows属性：https://stackoverflow.com/a/7194692/1061602。这似乎是因为当文本区域扩展时，JQuery移动正在进行转换。那么，rows属性总是被完全覆盖吗？

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

我还注意到，我无法解释的是，在我自己的代码中，一个流氓style="height: 184px;"被添加到我的一个文本区域，而不是另一个文本区域。另一种只是使用50 as的标准样式，正如这个答案中所强调的：jQuery Mobile and textarea rows --这似乎表明还有其他事情正在发生，但我还不能用简单的小提琴来再现它。

我已经快速地查看了JQuery移动源代码，但是我根本看不到使用rows属性？

为绑定的JQuery移动文本区域指定行高范围的最佳方法是什么？

Answer 1

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);

Answer 2

你所需要的就是..。加上这个

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

Answer 3

JQuery手机的目的是响应性，所以在你需要它之前，它不会占用空间。如果通过输入或代码将数据添加到textarea，则可以看到数据根据需要增长。

如果要在该大小为空时覆盖该大小，则有两个选项：

1. 使用奥马尔提到的方法，即关闭JQM角色，就像在JSFiddle示例中所做的那样。
2. 另一种方法是重写默认类as seen in this answer。