かえでBlog

色々なことを徒然と……

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

      2014/09/08

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">【テスト1】通常出力の場合</a>
                <textarea name="test1" id="test1"><br /><br />通常だと、テキストの量に合わせて自動的に改行されます。<br /><br />改行を追加すると自動的にテキストエリアの枠が広がります。</textarea>
        </div>
        <hr/>
        <div data-role="content">
                <label for="test2">【テスト2】javascriptで文字を挿入</label>
                <textarea name="test2" id="test2"></textarea>
                <div style="text-align:center">
                        <input type="button" name="test2_submit" data-inline="true" value="【テスト2】文字挿入" id="test2_submit"/>
                </div>
        </div>
        <hr/>
        <div data-role="content">
                <label for="test3">【テスト3】javascriptで文字を挿入(keyup)</label>
                <textarea name="test3" id="test3"></textarea>
                <div style="text-align:center">
                        <input type="button" name="test3_submit" data-inline="true" value="【テスト3】文字挿入" id="test3_submit"/>
                </div>
        </div>
</div>
</body>
</html>


 - jQueryMobile, 開発 , , ,