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部分: < ...
随机推荐
- js计算日期天数差-2013-9-26
function daymath(sdate, edate) { var startdate = sdate; var enddate = edate; ...
- 【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改
作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...
- git 学习笔记一
1.git的 介绍 分布式和 集中式 集中式版本控制系统最大的毛病就是必须联网才能工作,如果在局域网内还好,带宽够大,速度够快,可如果在互联网上,遇到网速慢的话,可能提交一个10M的文件就需要5分钟, ...
- oracle以web方式登录EM、ISQLPlus
1. 检查主机名/IP.端口安装时的主机名/IP.端口记录在$ORACLE_HOME/install/portlist.ini 文件中.缺省是:一般用户 htt ...
- CocoaPods的一些理解
在这片博客中,我将分享我从cocopods中学到的东西. 如果你使用Cocoapods,你的.gitignore文件中会有什么. 这个问题在debate on SO中被提及,但是我建议只追踪Podfi ...
- redis批量执行
1.首先把redis命令放在txt文件中 eg: 文件名: test.txt 内容如下: HMSET HM_001 name zhang01 age HMSET HM_002 name zhang0 ...
- oracle常用自定义函数集合
1.Oracle 判断值是否为数字的函数CREATE OR REPLACE FUNCTION ISNUMBER(MyStr VARCHAR2) RETURN NUMBERIS STR VARCHAR ...
- .net 判断日期格式yyyy-MM-dd hh:MM:ss的正则表达式
加上引用: using System.Text.RegularExpressions; /// <summary> /// 检查字符串是否是日期格式 /// </sum ...
- poj3090欧拉函数求和
E - (例题)欧拉函数求和 Crawling in process... Crawling failed Time Limit:1000MS Memory Limit:65536KB ...
- python Cmd实例之网络爬虫应用
python Cmd实例之网络爬虫应用 标签(空格分隔): python Cmd 爬虫 废话少说,直接上代码 # encoding=utf-8 import os import multiproces ...