今天为大家推出自己的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");
}
}
}
}]);