Autogrow textarea AngularJS directive

console.clear();

var app = angular.module('plunker', []);

app.controller('MainCtrl', function() {
  this.description = 'This is an example of an auto-grow textarea that automatically adjusts its height to content and also vertically aligning content to center making it look like a multi-line input[type=text].';
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans%26subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css" />
  </head>
  
  <body ng-controller="MainCtrl as context">
    <h3>Autogrow textarea example</h3>
    <p>
      This is an example of an auto-grow <code>textarea</code> that automatically
      adjusts its height to content and also vertically aligning content to
      center making it look like a multi-line <code>input[type=text]</code>.
    </p>
    
    <input type="text" placeholder="description" ng-model="context.description" />
    <textarea rows="0" class="autogrow" placeholder="description faqrr" ng-model="context.description"></textarea>
    
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="app.js"></script>
    <script src="autogrow.js"></script>
  </body>

</html>

/* Put your css in here */

html {
    font-size: 15px;
}

body {
    font-family: "Open Sans";
    font-size: 15px;
    line-height: 1.5;
}

input, textarea {
    display: block;
    background-color: #f9f9f9;
    
    width: 350px;
    min-height: 70px;
    overflow: hidden;
    box-sizing: border-box;
    
    margin: 2em 0;
    outline: 0 none;
    border: 0 none;
    border-bottom: 1px solid #ccc;
    padding: 0 20px 1px;
    
    font-family: "Open Sans";
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    
    resize: none;

    &:focus {
      background-color: #f6f6ff;
      border-color: #39f;
    }
}

input {
}

(function(main, $) {
  
  "use strict";
  
  main
    .directive("textarea", function() {
      return {
        restrict: "E",
        require: "ngModel",
        link: AutogrowLink
      };
    });
    
  function AutogrowLink(scope, element, attributes) {
    if (!element.hasClass("autogrow")) {
      // no autogrow for you today
      return;
    }

    // get possible minimum height style
    var minHeight = parseInt(window.getComputedStyle(element[0]).getPropertyValue("min-height")) || 0;

    // prevent newlines in textbox
    element.on("keydown", function(evt) {
      if (evt.which === 13)
      {
        evt.preventDefault();
      }
    });
    
    element.on("input" , function(evt) {
      element.css({
        paddingTop: 0,
        height: 0,
        minHeight: 0
      });
      
      var contentHeight = this.scrollHeight;
      var borderHeight = this.offsetHeight;

      element.css({
        paddingTop: ~~Math.max(0, minHeight - contentHeight) / 2 + "px",
        minHeight: null, // remove property
        height: contentHeight + borderHeight + "px" // because we're using border-box
      });
    });

    // watch model changes from the outside to adjust height
    scope.$watch(attributes.ngModel, trigger);
    
    // set initial size
    trigger();
    
    function trigger() {
      setTimeout(element.triggerHandler.bind(element, "input"), 1);
    }
  }
  
})(app, angular.element);

Autogrow textarea AngularJS directive
--
This is an example of a working AngularJS directive that provides following features:

1. Prevents entering new lines making `textarea` mimicking
everyday `input[type=text]` text boxes
2. Vertically centralizes content also mimicking text boxes - you may utilize
`min-height` CSS property setting for this to work
3. Automatically adjusts height to fit all of its content - text boxes with
excess content make it impossible to read it in full; text is horizontally
scrolled

> ***Important:*** *This directive doesn't have any additional library dependencies
apart from AngularJS. This means that jQuery library isn't required either.*