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>'
随机推荐
- iOS bug 之 H5 页面没有弹出提示框
描述:在安卓上有提示框,但是在iOS上没有提示框. step 1: 失误,是我没有在正确的位置设置网址. step 2: 修改之后,测试页能弹出提示框,但是正式的页面没有提示框. step 3: 我输 ...
- UVa 10718 - Bit Mask
题目大意:给一数N,在区间[L, U]上找到一个数M使得M| N的值最大,如果有M有多个可能值,取最小的那个值. 从最高位开始逐位判断,如果N的该位为0,为使M | N的值最大,M的该位应考虑置为1, ...
- setTimeout,setInterval 最短触发时间
<!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...
- 读【10问PHP程序员】 有感
http://bbs.phpchina.com/thread-174331-1-1.html 看到前人的文章,总结自己的学习心得,颇有感悟,下面是自己的总结,平时就拿出来多问问自己.1.上了十几年的学 ...
- 为什么delphi控件前面都有t
控件的类名都有一个T字, 它是Type的第一个字母. 比如按钮就是TButton. 但在Delphi的控件面板上的并不带T字, 比如就是Button. 如果你把它放在窗体上, 默认名字则成为Butto ...
- iOS 登陆之界面设置
1.界面构成 1.1. 效果图 1.2. 元素 背景图 用户名的输入框 密码的输入框 登陆按钮 忘记密码 用户注册 第三方登陆 两个分割线
- 固定表头带滚动条的HTML表格
http://blog.csdn.net/daryl715/article/details/1883677 <html> <head> </head> <BO ...
- Bootstrap入门(二十七)JS插件4:标签页
Bootstrap入门(二十七)JS插件4:标签页 标签页的切换可以带动内容的变化 首先我们引入CSS文件 <link href="bootstrap.min.css" re ...
- C# 数组、ArrayList、List、Dictionary的用法与区别
前言 在工作中经常遇到C#数组.ArrayList.List.Dictionary存取数据,但是该选择哪种类型进行存储数据,对于初学者的我一直不知道该怎么取舍.于是抽空好好看了下他们的用法和比较,在这 ...
- 服务器部署项目出现问题:Unsupported major.minor version 52.0
问题描述: 编写一个web 前置服务,使用ant编译项目,将项目部署到服务器上,启动时报此错误:Unsupported major.minor version 52.0 网上给出错误原因是服务器安装的 ...