码迷,mamicode.com
首页 > 其他好文 > 详细

angular : direative : autoResize

时间:2014-08-22 19:34:09      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   使用   io   strong   for   

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

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

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

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

bubuko.com,布布扣
<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 = $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

标签:style   blog   http   color   os   使用   io   strong   for   

原文地址:http://www.cnblogs.com/stooges/p/3930022.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!