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>

rowsただし、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属性がオーバーライドされると述べています: https://stackoverflow.com/a/7194692/1061602。テキストエリアの展開時にJQuery Mobileがトランジションを行っているためと思われます。行属性は常に完全にオーバーライドされていますか?

もう 1 つの同様の質問は次のとおりです:テキスト領域を 10 行固定の高さにするにはどうすればよいですか? 、しかし、すべてのテキストエリアの高さを修正したくないので、これは役に立ちません。通常はrows属性を使用できるため、それらを変更したいと思います。

また、説明できないことに気付きましたが、自分のコードでstyle="height: 184px;"は、テキストエリアの 1 つにローグが追加されていますが、別のテキストエリアには追加されていません。もう1つは、この回答で強調されているように、50pxの標準スタイルを使用するだけです: jQuery Mobile and textare rows - これは、何か他のことが起こっていることを示しているようですが、単純なフィドルではまだ再現できません。

JQuery Mobile のソースをざっと見ましたが、rows属性がまったく使用されていません。

バインドされた JQuery Mobile テキストエリアの範囲に対して行の高さの範囲を指定する最良の方法は何でしょうか?

4

6 に答える 6

13

必要なのは...これを追加するだけです

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

jQM はtextarea、応答性とスタイリングの目的でさまざまなクラスを追加することで機能を強化します。高さを維持するための最も速くて簡単な方法rowsは、jQM クラスをオーバーライドすることです。

デモ

CSS ソリューション:

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

JS ソリューション - テキストエリアが拡張された後に高さを設定します。

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

JQuery Mobile はレスポンシブであることを意図しているため、設計上、必要になるまでスペースを占有することはありません。入力またはコードを介してテキストエリアにデータを追加すると、必要に応じてデータが大きくなることがわかります。

空のときにそのサイズをオーバーライドする場合は、次の 2 つのオプションがあります。

  1. JSFiddle の例で行ったように、Omar が説明した方法を使用して、JQM ロールをオフにします。

  2. もう 1 つは、この回答に見られるように、デフォルト クラスをオーバーライドすることです。

于 2013-10-01T14:39:25.327 に答える
4

私は同じ問題を抱えていましたが、最終的に解決策を見つけました。textarea 要素で ' data-autogrow="false" ' を設定できます。その後、css で行属性または高さを設定できます。jquery mobile 1.4.0以降で動作します

于 2015-10-27T07:27:26.257 に答える
1

あなたはこれを使うことができます：data-autogrow="false"
このように： <textarea rows="10" name="textarea-2" id="textarea-2" data-autogrow="false"></textarea>

于 2016-08-24T09:39:46.537 に答える