開発 jQueryMobile

【JqueryMobile】javascriptでtextarea挿入後のリサイズ

2013年8月6日

JqueryMobileは文字入力するとその文字数に応じた幅に自動調整されます。

改行とか打つ度に自動リサイズされ便利なのですがjavascriptで文字挿入を行うと自動調整されません。

javascript挿入後文字入力を行うと自動調整されるのですが、それだとあまりにも勝手が悪い……

なので、自動調整方法を探しているとkeyupを使えばいいみたいです。

サンプルはこちら

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"><br /><br />
  <!-- Need to get a proper redirect hooked up. Blech. -->
  <meta name="robots" content="noindex, follow"><br /><br />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery Mobile</title>
  <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css">
  <script src="js/jquery-2.0.3.min.js"></script>
  <script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
  <div data-role="page" id="textarea_resize" data-theme="a">
    <script type="text/javascript">
      $(document).bind("pagecreate",function(){
      $('#test2_submit').bind("tap",function(){
      $('#test2').text("javascriptの文字出力だと自動的
      にテキストの量に関わらずテキストエリアの枠が広がりません。\n\n ただし、文字を入>
      力すると自動的にリサイズされます。");
      });
      $('#test3_submit').bind("tap",function(){
      $('#test3').text("javascriptにkeyupを追加してあ>
      げると文字挿入後テキストエリアを自動的にリサイズします。\n\n これでわざと文字入>
      力してリサイズする必要はなくなりました。");
      $('#test3').keyup();
      });
      });
    </script>
    <div data-role="content"> <label for="test1">【テスト１】通常出力の場合</a>
<textarea name="test1" id="test1"><br /><br />通常だと、テキストの量に合わせて自動的に改行されます。<br /><br />改行を追加すると自動的にテキストエリアの枠が広がります。</textarea>
</div>
<hr/>
<div data-role="content">
<label for="test2">【テスト２】javascriptで文字を挿入</label> <textarea name="test2" id="test2"></textarea>
      <div style="text-align:center"> <input type="button" name="test2_submit" data-inline="true" value="【テスト２】文字挿入" id="test2_submit" /> </div>
    </div>
    <hr/>
    <div data-role="content"> <label for="test3">【テスト３】javascriptで文字を挿入(keyup)</label> <textarea name="test3" id="test3"></textarea>
      <div style="text-align:center"> <input type="button" name="test3_submit" data-inline="true" value="【テスト３】文字挿入" id="test3_submit" /> </div>
    </div>
  </div>
</body>
</html>

-開発, jQueryMobile
-, , ,