css – JQuery Mobile textarea：它如何使用’rows’属性？

我想用JQuery Mobile动态生成带有不同行数的textareas.我打算在这里使用knockout,data-bind到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属性是否总是被完全覆盖？

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

我所注意到的,我无法解释的是,在我自己的代码中,流氓风格=“身高：184px;”添加到我的textareas之一,但不是另一个.另一个只是使用50px的标准风格,正如这个答案中强调的那样：jQuery Mobile and textarea rows – 这似乎表明还有其他事情正在发生,但我还是无法用简单的小提琴重现这一点.

我已经快速浏览了JQuery Mobile源代码,但是我看不到正在使用的行属性？

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

解决方法

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

07000

CSS解决方案：

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

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

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