AngularJSのディレクティブでtextareaタグの高さを自動調整

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');
        });
      }
    }
  };
});