首页 > 代码库 > angular : direative : autoResize

angular : direative : autoResize

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

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

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

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

<script> 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 =http://www.mamicode.com/ $interpolate($element.val())(scope);                    resizeTextarea($element, value);                    if (is_watch) {                        $element.on("keyup", function () {                            resizeTextarea($element, $element.val());                        });                    }                }            }        }]);    </script>
View Code

过程:在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没附上。

 

angular : direative : autoResize