自适应高度的 textarea
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自适应高度的textarea</title>
<style>
textarea { border: 1px solid gray; width: 100%; overflow: hidden; }
</style>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {
$('textarea').bind('input propertychange focus', function () {
this.style.posHeight = this.scrollHeight;
});
});
</script>
</head>
<body>
<textarea>
测试1
测试2
</textarea>
</body>
</html>
HTML5支持input事件，IE9及以下的IE浏览器支持propertychange事件。
已知bug：在IE9中，使用鼠标右键剪切、粘贴操作文本时，不能触发事件。
自适应高度的 textarea的更多相关文章
- div实现自适应高度的textarea，实现angular双向绑定
相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...
- “自适应”高度的 textarea 文本输入框
写在前面 那啥,在我的那个很安静的一个 CSS 群(群号:82991297)突然看到有人在问一个问题. 使用 css 如何实现:textarea 如何实现高度自适应? 当时看到这个问题的时候,我脑中只 ...
- html5 textarea 文本框根据输入内容自适应高度
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 自适应高度输入框（contenteditable/textarea）
一.用div模拟textarea div模拟输入域可以根据输入内容自动伸缩,而input和textarea输入内容较多时,高度固定,内容会显示不全. 1.坑1(IOS端无法输入) 在取消全局默认样 ...
- 微信端应用 ionic实现texarea 自适应高度
最近公司项目,做微信端用到texarea 需要实现自适应高度的功能 当然自适应高度的方法很多网上找一大片,最直接的方式就是在使用到texarea的controller中添加js代码事件来实现,这中方式 ...
- textarea自适应高度
最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个te ...
- Jquery实现textarea根据文本内容自适应高度
本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...
- textarea自适应高度，div模仿textarea可编辑实现自适应高度，placeholder使用图标
1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...
- 将textarea实现自适应高度及IE下滚动条不出现的bug
1.<el-table-column label="备注" width="180"> <template scope="scope& ...
随机推荐
- Eclipse+pydev 常用快捷键
多行缩进(减少缩进):tab/shift+tab 复制行: Ctrl+Alt+方向键'↓' 删除行:Ctrl+d 自动完成:Alt+/ 注释:Ctrl+/ 窗口最大小:Ctrl+m 1 几个最重要的 ...
- myBatis自动生成相关代码文件配置（Maven）
pom.xml文件添加配置 <build> <finalName>generator</finalName> <plugins> <!-- mav ...
- spring AspectJ的Execution表达式说明
Aspectj切入点语法定义 在使用spring框架配置AOP的时候,不管是通过XML配置文件还是注解的方式都需要定义pointcut"切入点" 例如定义切入点表达式 execut ...
- 利用sublime的snippet功能快速创建代码段
在前端开发中我们经常会输入相同的一些基本代码,例如常用的jquery引用,bootstrap框架,cssreset等等,如果每次使用时在复制粘贴感觉很麻烦,这里介绍一种更为简洁的方法 利用sublim ...
- 关于SOAP
http://www.tutorialspoint.com/soap/index.htm http://www.w3.org/TR/2000/NOTE-SOAP-20000508/ SOAP协议规范介 ...
- DevOps：怎么实现源代码注释和系统文档的自动化更新？
[编者按]计算机软件传统定义为:软件是计算机系统中与硬件相依存的另一部分,软件包括程序.数据及其相关文档的完整集合.然而在时下的开发中,文档的合规性往往被忽视的干干净净.本文由 Todd Waits ...
- Rake::TestTask 介绍
Rake::TestTask 介绍 通常我们创建一个新的项目的时候,会建立一个test或者spec的文件夹来存放测试的文件,运行这些测试需要单独的命令,比如在项目目录下执行rspec .或者ruby ...
- MVC中 ViewBag、ViewData和TempData区别
MVC3中 ViewBag.ViewData和TempData的使用和区别 public dynamic ViewBag { get; } public ViewDataDictionary View ...
- HDU 2059 龟兔赛跑（动态规划）
龟兔赛跑 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- Javascript 正则表达式_4
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...