入力行数に合わせてrowsを自動調整

入力された文字数と改行に合わせて高さを追加

jQuery

$(function () { $('textarea').on('blur change click keydown keypress keyup', function(){ var str = $(this).val(); if (str) { var increase = 0; // 改行毎に文章を抽出 var line = str.match(/.*\n/g); if (line) { $.each( line, function(i, val){ // 改行毎に行追加 increase += 1; // 1行あたり30文字を超えていたら行追加 val_byte = getByte(val); if (val_byte > 60) { increase += Math.round(val_byte / 60); } }); } else { // 1行あたり30文字を超えていたら行追加 val_byte = getByte(str); if (val_byte > 60) { increase += Math.round(val_byte / 60); } } $(this).attr('rows', 5 + increase); } else { // 空の場合は初期値をセット $(this).attr('rows', 5); } // 改行毎に行追加 // var indention = str.match(/\n/g).length; // if (indention > 0) { // $(this).attr('rows', 5 + indention); // } else { // $(this).attr('rows', 5); // } }); /** * バイト数計算 * @param {string} val * @return {int} */ function getByte(val) { var val_byte = 0; for (var i = 0; i < val.length; i++){ if (escape(val.charAt(i)).length <= 3) { // 半角は1 val_byte += 1; } else { // 全角は2 val_byte += 2; } } return val_byte; } });

escape('a') = a、escape('1') = 1
escape('!') = %21、escape('?') = %3F
escape('あ') = %u3042、escape('ア') = %u30A2
の通りシングルバイトはエスケープ すると3桁以下、マルチバイトは3桁超。

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。