textareaにディレクティブを追加
AngularJSでtextareaタグの高さを自動調整するディレクティブを作成。
使い方は下記のJavaScriptのコードを記述してtextareaタグにresize-textarea ng-model="r"を付けるだけ。
行間の高さはデフォルトは20pxにしてあるので30pxなどに変更したい場合はresize-textarea="30"と記述すれば変更可能。
AngularJSのディレクティブでtextareaタグの高さを自動調整するサンプル
<textarea resize-textarea ng-model="r"></textarea>
var app = angular.module('app', []);
app.directive("resizeTextarea", function() {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
if(elem[0].nodeName === 'TEXTAREA') {
var HEIGHT = attrs['resizeTextarea'] ? attrs['resizeTextarea'] : 20;
var resize = function(e) {
var textHeight = e.target.scrollHeight;
var height = Math.floor(textHeight / HEIGHT) * HEIGHT
elem.css('height', height + 'px');
};
elem.css({
'lineHeight': HEIGHT + 'px',
'height': HEIGHT + 'px',
'min-height': HEIGHT * 2 + 'px'
});
elem.on('input', resize);
scope.$watch(attrs.ngModel, function() {
var textHeight = elem[0].scrollHeight;
var height = Math.floor(textHeight / HEIGHT) * HEIGHT
if(height > HEIGHT) {
height = height - HEIGHT;
}
elem.css('height', height + 'px');
});
}
}
};
});
