Question

我想使用不同数量的行动态生成带有JQuery Mobile的textareas。我打算在这里使用knockout，数据绑定到rows属性。

<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。似乎这是因为当textarea扩展时，JQuery Mobile正在进行转换。那么rows属性是否总是被完全覆盖？

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

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

我已经快速浏览了JQuery Mobile源代码，但我看不到rows属性被使用了吗？

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

Answer 1

你需要的只是......添加这个

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

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

Answer 3

JQuery Mobile旨在提供响应，因此通过设计，在您需要它之前不会占用空间。如果您通过输入或通过代码将数据添加到textarea，您可以看到它根据需要增长。

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

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

Answer 4

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

Answer 5

文本区域内容自动滚动更多行。你想要的最大高度。添加CSS

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

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

JQuery Mobile textarea：它如何使用'rows'属性？

5 个答案: