angular : direative : autoResize textarea auto resize

今天为大家推出自己的auto resize 指令功能。

目的：解决textarea在给height的问题。

参考源码：http://monospaced.github.io/angular-elastic/elastic.js

参考网站：http://plnkr.co/edit/9y6YLriAwsK9hqdu72WT?p=preview

 

 angular.module("Stooges", []).
        directive("autoResize", ["$interpolate", function ($interpolate) {
            var calcTextarea; //缓存 calcTextarea 指针
            var lastTeaxArea; //保留最后一次textarea的指针，for 验证要不要 copy paste comeputedStyle
            function createCalcTextarea() {
                var txa = document.createElement("textarea");
                txa.style.cssText = "position:fixed; top:-9999px; left:0; overflow-y:hidden;";
                document.body.appendChild(txa);
                calcTextarea = txa
                return calcTextarea;
            }
            function resizeTextarea($element, value) {
                calcTextarea = (calcTextarea) ? calcTextarea : createCalcTextarea(); //没有就创建一个                
                if (lastTeaxArea !== $element[0]) {
                    //copy paste all style to calcTextarea
                    var COPY_PASTE_COMPUTED_STYLE = ['width', 'border-top-width', 'border-bottom-width', 'border-left-width', 'border-right-width', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', 'line-height', 'font-family', 'font-size', 'font-weight', 'font-style', 'resize', 'letter-spacing', 'text-transform', 'word-spacing', 'text-indent', 'word-break', 'word-wrap', '-webkit-box-sizing', '-moz-box-sizing', 'box-sizing']
                    lastTeaxArea = $element[0];
                    var computedStyle = window.getComputedStyle($element[0], null);
                    COPY_PASTE_COMPUTED_STYLE.forEach(function (attr) {
                        var camelCaseWord = attr.toCamelCase();
                        calcTextarea.style.setProperty(attr, computedStyle[camelCaseWord]); //用 setProperty 比较好(不然font处理不到)
                    });
                }
                calcTextarea.value = value;
                var currentHeight = calcTextarea.scrollHeight;
                $element.css("height", currentHeight + 20 + "px");
            }
            return {
                restrict: "A",
                link: function (scope, $element, attrs, ctrl) {
                    $element[0].style.cssText = "resize:none; overflow:hidden; -webkit-transition: 0.3s linear; transition: 0.3s linear;"; //set default css
                    var is_watch = attrs["autoResize"] === "watch";
                    var value = $interpolate($element.val())(scope);
                    resizeTextarea($element, value);
                    if (is_watch) {
                        $element.on("keyup", function () {
                            resizeTextarea($element, $element.val());
                        });
                    }
                    else {
                        $element.attr("readonly");
                    }
                }
            }
        }]);

过程：在body里append一个textarea，定位在老远的北方(top:-9999px)。接着把有auto-resize指令的textarea的所有css属性（大概20个）给取出，给刚刚append的textarea附上新属性。把内容给取出来放进新的textarea里，计算高度，最后把高度给当前被使用的textarea里。

css取出来是为了更精准的计算文字的高度，所以我只拿会影响高度的css，同时我也把textarea的overflow附上hidden属性，因为这点为影响width。

auto-resize指令有一个默认，当没有value时，会没有keyup事件。如果把value设置成"watch"，就有keyup事件。

在第一次keyup新的对象时，会把当前的对象css属性给复制到在北方的textarea。

在每次keyup时，会把对象的value同步到北方的textarea，计算高度后给对象新的高度。

 

*不用复制代码自己测试，因为有些js没附上。