6

我想使用 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 属性是否总是被完全覆盖？

另一个类似的问题在这里：如何使文本区域固定为 10 行的高度？，但这对我没有帮助，因为我不想固定所有文本区域的高度，我希望它们有所不同，因为它们通常可以使用该rows属性。

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

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

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

4

6 回答 6

13

所有你需要的是......添加这个

textarea.ui-input-text { height: inherit !important}
于 2014-01-22T21:36:34.077 回答
9

jQMtextarea通过为响应和样式添加不同的类来增强。保持rows高度最快和最简单的方法是重写 jQM 类。

演示

CSS解决方案：

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

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

setTimeout(function () {
  $('textarea').css({
    'height': 'auto'
  });
}, 0);
于 2013-10-01T15:15:27.193 回答
4

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

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

  1. 使用 Omar 提到的方法，即关闭 JQM 角色，就像您在 JSFiddle 示例中所做的那样。

  2. 另一种是覆盖默认类，如this answer所示。

于 2013-10-01T14:39:25.327 回答
4

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

于 2015-10-27T07:27:26.257 回答
2

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

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

 <textarea name="textarea-1" id="textarea-1" style="max-height:30px;">
于 2013-10-01T13:29:39.807 回答
1

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

于 2016-08-24T09:39:46.537 回答