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">

    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href=',latin-ext' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css" />
  <body ng-controller="MainCtrl as context">
    <h3>Autogrow textarea example</h3>
      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>.
    <input type="text" placeholder="description" ng-model="context.description" />
    <textarea rows="0" class="autogrow" placeholder="description faqrr" ng-model="context.description"></textarea>
    <script src=""></script>
    <script src="app.js"></script>
    <script src="autogrow.js"></script>

/* 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";
    .directive("textarea", function() {
      return {
        restrict: "E",
        require: "ngModel",
        link: AutogrowLink
  function AutogrowLink(scope, element, attributes) {
    if (!element.hasClass("autogrow")) {
      // no autogrow for you today

    // 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)
    element.on("input" , function(evt) {
        paddingTop: 0,
        height: 0,
        minHeight: 0
      var contentHeight = this.scrollHeight;
      var borderHeight = this.offsetHeight;

        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
    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

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