JQuery Mobile textarea：它如何使用'rows'属性？ [英] JQuery Mobile textarea: how does it use 'rows' attribute?

问题描述

我想使用JQuery Mobile动态生成文本区域，其行数不同。我打算使用knockout这个，数据绑定到行属性。

这里： http://jsfiddle.net/j7b9A/2/

 < label for =textarea-1> 5行：< / label> 
< textarea rows =5name =textarea-1id =textarea-1>< / textarea> 
 
< label for =textarea-2> 10行：< / label> 
< textarea rows =10name =textarea-2id =textarea-2>< / textarea>但是，JQuery Mobile似乎忽略了行  >属性，其中已详细记录： 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 属性：http://stackoverflow.com/a/7194692/1061602 。看来，这是因为JQuery Mobile正在做一个过渡，当textarea扩展。那么rows属性总是被完全覆盖？
 
 
 
另一个类似的问题在这里：如何使文本区域高度固定为10行？，但这没有帮助我因为我不想修正所有textareas的高度，我想让他们改变，因为他们通常可以使用行属性。
 
 
 
我也注意到，我不能解释的是，在我自己的代码，一个流氓 style =height：184px;添加到我的一个textareas，但不是另一个。另一个只使用50px的标准样式，如此答案中突出显示的： jQuery Mobile和textarea行  - 这似乎表明还有其他事情发生，但我不能在一个简单的小提琴重现这个。
 
 
 
我有一个快速看看JQuery Mobile源，但是我看不到所使用的行属性？
 
 
 
 
解决方案
 jQM增强了<$ c的行高度范围$ c> textarea 通过为响应和样式添加不同的类。维持行 height的最快，最简单的方法是重写jQM类。
 
 
  演示  
 
 
 CSS解决方案：
  .custom_class {
 height： ; / *！important用于强制覆盖。 * / 
} 
  
 JS解决方案 - 在textarea增强后设置高度。 
 
 
  setTimeout（function（）{
 $（'textarea'）。css（{
'height'：'auto '
}）; 
}，0）; 
  
 
I would like to dynamically generate textareas, with JQuery Mobile, with varying numbers of rows. I was intending on using knockout for this, data-bind to the rows attribute.

E.g. here: 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>
However, JQuery Mobile seems to ignore the rows attribute, which is well-documented: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea, and is even included in JQuery Mobile's own documentation: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/textinputs/index.html#Textarea.

A comment here states that setting the height and width overrides the rows attribute: http://stackoverflow.com/a/7194692/1061602. It seems that it is because JQuery Mobile is doing a transition when the textarea expands. So is rows attribute always being completely overridden?

Another similar question is here: How to make text area to be height of 10 rows fixed?, but this doesn't help me as I don't want to fix the height of all textareas, I would like them to vary, as they can normally using the rows attribute.

Also what I have noticed, which I can't explain, is that in my own code, a rogue style="height: 184px;" is added to one of my textareas, but not another. The other just uses the standard style of 50px, as highlighted in this answer: jQuery Mobile and textarea rows - this would seem to indicate there is something else going on, but I can't reproduce this yet in a simple fiddle.

I've had a quick look at the JQuery Mobile source but I can't see the rows attribute being used at all?

What would be the best way of specifying a range of row heights for a range of bound JQuery Mobile textareas?
解决方案
jQM enhances textarea by adding different classes for responsiveness and styling purposes. The fastest and easiest way to maintain rows height is by overriding jQM class.

  
Demo
CSS solution:
.custom_class {
  height: auto !important; /* !important is used to force override. */
}
JS solution - set height after textarea is enhanced.
setTimeout(function () {
  $('textarea').css({
    'height': 'auto'
  });
}, 0);


                        
这篇关于JQuery Mobile textarea：它如何使用'rows'属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！