JQuery Mobile textarea: how does it use 'rows&

问题:

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: https://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?

回答1:

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

回答2:

all you need is... add this

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

回答3:

JQuery Mobile is intended to be responsive, so by design it's not going to take up space until you need it. If you add data to the textarea, either via input or via code, you can see that it grows as needed.

If you want to override that size when it's empty, you have two options:

1. Use the method Omar mentioned, which is to turn off the JQM role, as you did in the JSFiddle example.

2. The other is to override the default class, as seen in this answer.

回答4:

I had the same problem and I finally found a solution. you can set ' data-autogrow="false" ' in textarea element, after that you can set rows attribute or height in css. it does works in jquery mobile 1.4.0+

回答5:

Text area content auto scroll when more lines. max-height as you wish. Add css

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

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

回答6:

You can use this : data-autogrow="false"
like this : <textarea rows="10" name="textarea-2" id="textarea-2" data-autogrow="false"></textarea>