首页 > 代码库 > 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>
过程:在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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。