入力行数に合わせて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桁超。
サンプル
