Angular Textarea 高度自动变化
很多前端开发的朋友可能都会遇到textarea 输入框的高度不能自动随着用户的输入变化的问题,今儿小生也遇到了, 并通过网络上的信息解决了这个问题,于是将解决方法贴上,以作备忘。
directiveApp.directive('autoHeight', function(){
function autoHeight(elem){
elem.style.height = 'auto';
elem.scrollTop = 0; //防抖动
elem.style.height = elem.scrollHeight + 'px';
}
return {
scope: {},
link: function (scope, ele, attrs) {
var oriEle = $(ele).get(0);
$(oriEle).focus();
$(oriEle).bind('keyup click', function(e) {
autoHeight($(this).get(0));
});
var timer = setInterval(function(){
if($(oriEle).val()) {
autoHeight(oriEle);
clearInterval(timer);
}
}, 100);
}
};
});
Html code:
<textarea auto-height></textarea>
不才,望谅。
Angular Textarea 高度自动变化的更多相关文章
- textarea高度自动增高
<!--随着textarea 输入内容 自动增加高度--> <script type="text/javascript"> $(".input_t ...
- 父div高度不能根据子div高度自动变化的解决方案
<div id="parent"> <div id="content"> </div> </div> 当cont ...
- textarea 高度自动
<textarea id="suggest" type="text" name="suggest" class="form- ...
- react textArea 高度不变化问题
ref={el =>{ if(el){ el.textareaRef.style.height = el.textareaRef.scrollHeight + 'px'; } } }
- html文本域textarea高度自增、自动换行
文本域自动换行.高度自增,采用以下方式: html: <textarea rows="1" class="answerTextArea" maxlengt ...
- textarea 实现高度自动增长
有时候希望textarea 能够自动调整高度来适应输入的内容 网上看到了很多解决方案,比如动态创建一个隐藏的div,当用户输入的时候将textarea的内容绑定到div,由于div的高度会自动撑开,因 ...
- textarea宽度、高度自动适应处理方法
textarea自动高度 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http: ...
- textarea高度自适应自动展开
在使用之前,推荐两个比较好的事件,分别是oninput和onpropertychange,IE9以下不兼容oninput.在textarea发生变化时,可以通过监听这两个事件来触发你需要的功能. te ...
- textarea高度跟随文字高度而变化
html部分: <textarea id="textarea">哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽</textarea> js部分: < ...
随机推荐
- 菜鸟学EJB(二)——在同一个SessionBean中使用@Remote和@Local
不废话.直接进入正题: 在Jboss4及曾经的版本号中,例如以下代码能够成功部署: package com.tjb.ejb; import javax.ejb.Local; import javax. ...
- [WebStrom] Cannot detect file change to trigger webpack re-compile
Working with editors/IDEs supporting “safe write” Note that many editors support “safe write” featur ...
- C++刷称号——2707: 素数与要素
Description 从键盘输入的随机整数n,如果n不是质数,然后计算n所有的因素(不含1).例如,对于16,出口2,4,8:否则输出"It is a prime number." ...
- 【转】Difference between Point-To-Point and Publish/Subscribe JMS Messaging Models
Difference between Point-To-Point and Publish/Subscribe JMS Messaging Models Point-to-Point (PTP) ...
- Tomcat6.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 Web modules
使用tomcat6发布项目的时候,报以上错误,servlet版本太高的原因.tomcat6不支持servlet3.0 解决方法有两个: 1.使用高版本的tomcat,如tomcat7.tomcat8 ...
- 关于sql2005 与 myeclipse进行连接出现的小问题
C盘目录下没有jdbc这个文件夹,所以从网上下一个 这个是2008连接jdbc用的 正常解压第一个到相应的目录 主要是注意一个叫tcp/ip的协议,米有找到64位的 点击这里的tcp ip就哦了但是他 ...
- 8 Hbase get方式获取数据
package com.hikvision.hbase.vertify.test; import org.apache.hadoop.conf.Configuration; import org.ap ...
- windows下配置svn的https访问
svn是一个功能强大的代码版本管理系统,可以将服务端安装在linux.unix以及windows下.svn通常采用http方式进行代码提交与下载.由于密码采用明文传输,因此存在泄密的风险.若采用htt ...
- FFT与多项式、生成函数题目泛做
题目1 COGS 很强的乘法问题 高精度乘法用FFT加速 #include <cstdlib> #include <iostream> #include <algorit ...
- [译]终极塔防——运用HTML5从头创建一个塔防游戏
翻译共享一篇CodeProject的高星力作,原文地址:http://www.codeproject.com/Articles/737238/Ultimate-Tower-Defense 下载演示项目 ...