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没附上。
angular : direative : autoResize textarea auto resize的更多相关文章
- angular : direative : scope | 指令scope里的符号@,=
先看看以下的代码 <body ng-app="app" ng-controller="ctrl"> <dir myname="nam ...
- angular : direative : scope | 指令scope和transclude的关系
今天记入的是指令的scope和transclude关系 a 和 b 都是指令 <div a> <div b></div> </div> a transc ...
- angular : direative :comunication 指令之间的通讯
在网络上可以找到多种指令之间的通讯 · $on,$emit,$boardcast (向上或向下冒泡) · 指令return的required (^)向上一个scope通讯,前提要先给scope一个na ...
- 设置textarea文本域不能调整大小 resize
CSS3中新增了resize缩放属性,这个属性可以应用到任意元素.目前只有Webkit内核的浏览器才支持这个css3属性,即Google chrome和Apple safari都支持.而textare ...
- jQuery autoResize
这是一个用jQuery实现的, 自动调整textarea高度, 非常的好!但原作者已经把它的相关描述页面移除了, 这里做个备份吧~但js路径还在:full: http://james.padolsey ...
- textarea增加字数监听且高度自适应(兼容IE8)
1.封装方法: var textareaListener = { /*事件监听器兼容 * *attachEvent——兼容:IE7.IE8:不兼容firefox.chrome.IE9.IE10.IE1 ...
- CSS3魔法堂:禁止用户改变textarea大小
一.前言 在FF.Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅与IE下textarea的行为特点有异,而且textarea的大小变化会撑大其父节点从而破坏整体 ...
- 【转】使用 Auto Layout 的典型痛点和技巧
layoutIfNeeded()强制立刻更新布局 原文网址:http://www.jianshu.com/p/0f031606e5f2 官方文档:Auto Layout Guide 加上去年WWDC上 ...
- textarea禁止拖拽
<textarea style="resize:none;" ></textarea>'
随机推荐
- linux系统安装iprouter
在上文中将mpls编译进了linux内核,现在需要安装iprouter,安装过程如下: 1) 下载两个文件iproute2-2.6.39.tar.gz和iproute2-v2.6.39-mpls.pa ...
- scale等比缩放才能做到看上去能让线条以中心点展开
.nav-menu>ul>li>a::before { background: #333 none repeat scroll 0 0; bottom: -2px; conte ...
- iOS 之 CALayer与UIView的区别
最大区别:CALayer (图层)不会直接渲染到屏幕上. UIView是iOS系统中界面元素的基础,所有的界面元素都继承自它.它本身完全是由CoreAnimation来实现的. 真正的绘图部分,是由一 ...
- js原生设计模式——6复杂对象的构建—Builder建造者模式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- CentOS 7 部署、连接 数据库mariadb
1.安装mariadb yum -y install mariadb* 2.开启/停止 systemctl start mariadb #启动MariaDB systemctl stop maria ...
- #最小生成树# #kruskal# ----- OpenJudge丛林中的路
最小生成树 一个有 n 个结点的连通图的生成树是原图的极小连通子图,且包含原图中的所有 n 个结点,并且有保持图连通的最少的边.最小生成树可以用kruskal(克鲁斯卡尔)算法或prim(普里姆)算法 ...
- 初识JSON
▓▓▓▓▓▓ 大致介绍 JSON(JavaScript Object Notation JavaScript对象表示法),JSON是一种数据格式,不是一种编程语言.虽然它的名字中有JavaScrip ...
- 2016年,总结篇 之 VueJS 如何入门(一)
接着 2016 年的总结,我们来看看 2016年 国内最火且没有之一的前端MVVM 框架 VueJs 虽然 到写文章的这个时间点,VueJs已经发布了 2.1.x 了, 但是对于很多 Vuejs 的初 ...
- eclipse安装git插件
用Eclipse开发,有时需要团队协作,git就是个比较好的选择.下面简单介绍一下git插件的安装方法: 1.Help -- install new software 打开插件安装界面 2.点ad ...
- ubuntu linux 设置环境变量
添加环境变量 1.添加临时变量 终端中输入: PATH="$PATH:yourpath" :yourpath是要添加的环境变量(即要添加目录的绝对路径,例:/home/myprog ...