Kendo Dynamic Sized TextArea

by Trae

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<textarea id="plugin" class="k-textbox">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel suscipit orci. Nulla facilisi. Maecenas luctus, leo in ornare euismod, massa eros porttitor lacus, ac imperdiet est mauris et ante. In a consequat massa. Ut euismod auctor porttitor. Aliquam aliquet vehicula mattis. In ante quam, convallis non metus eu, dictum iaculis lectus. Nam a nibh non elit congue venenatis nec vitae quam. Maecenas quis imperdiet ex. Nulla vulputate justo ac rutrum bibendum. Aliquam efficitur interdum euismod. Nullam vitae mauris fermentum, elementum quam blandit, vestibulum eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean bibendum efficitur nulla. Cras eleifend pulvinar lorem, id lacinia odio molestie sit amet. Pellentesque vehicula, elit a lobortis gravida, nulla lacus eleifend nunc, sit amet accumsan dolor libero in velit.</textarea>

CSS

.dynamicTextArea {
    position: relative;
    width: 100%;
}

.dynamicTextArea > textarea,
.dynamicTextArea > pre {
    font: 400 14px Oxygen, Helvetica, sans-serif;
    margin: 0;
    outline: 0;
    border: 0;
    padding: 5px;
    background: transparent;  
    white-space: pre-wrap;
    word-wrap: break-word;
}

.dynamicTextArea > textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;  
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    resize: none;
}

.dynamicTextArea > pre {
    display: block;
    visibility: hidden;
}

JavaScript

(function ($, kendo) {
    var Widget = kendo.ui.Widget,
        STATEDISABLED = "k-state-disabled",
        DISABLED = "disabled",
        READONLY = "readonly",
        CHANGE = "change",
        BLUR = "blur",
        INPUT = "input",
        ns = ".kendoDynamicTextArea",
        DynamicTextArea = Widget.extend({

            init: function (element, options) {
                var that = this;
                Widget.fn.init.call(this, element, options);
                that._createHtml();
                that.wrapper = that.element.closest(".dynamicTextArea");
                that.span = that.wrapper.find("span");
                that._bindChanges();

                var disabled = that.element.is("[disabled]");

                if (disabled) {
                    that.enable(false);
                } else {
                    that.readonly(that.element.is("[readonly]"));
                }

                that.value(that.options.value || that.element.val());

                kendo.notify(that);
            },
            options: {
                name: "DynamicTextArea",
                value: ""
            },
            events: [CHANGE],
            destroy: function() {
                var that = this;
                that.element.off(ns);
                that._unbindChanges();
                Widget.fn.destroy.call(that);
            },
            value: function (value) {
                var that = this;
                if (value === undefined) {
                    return that._value;
                }

                that._update(value);
                that._old = that._value;
            },
            readonly: function (readonly) {
                this._editable({
                    readonly: readonly === undefined ? true : readonly,
                    disable: false
                });
            },
            enable: function (enable) {
                this._editable({
                    readonly: false,
                    disable:...