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

Question

我想使用不同数量的行动态生成带有JQuery Mobile的textareas.我打算在这里使用knockout,数据绑定到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.似乎这是因为当textarea扩展时,JQuery Mobile正在进行转换.那么rows属性是否总是被完全覆盖？

另一个类似的问题是:如何使文本区域固定10行的高度？,但这对我没有帮助,因为我不想修复所有textareas的高度,我希望它们可以变化,因为它们通常可以使用rows属性.

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

我已经快速浏览了JQuery Mobile源代码,但是我看不到该rows属性的用途？

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

Answer 1

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

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

Answer 2

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

演示

CSS解决方案:

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

JS解决方案 - 在增强textarea之后设置高度.

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