開発 jQueryMobile

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

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

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

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

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

サンプルはこちら

[html]
<!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>
[/html]

-開発, jQueryMobile
-, , ,

© 2020 かえでBlog