<!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的更多相关文章

  1. div实现自适应高度的textarea，实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...

  2. “自适应”高度的 textarea 文本输入框

    写在前面 那啥,在我的那个很安静的一个 CSS 群(群号:82991297)突然看到有人在问一个问题. 使用 css 如何实现:textarea 如何实现高度自适应? 当时看到这个问题的时候,我脑中只 ...

  3. html5 textarea 文本框根据输入内容自适应高度

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. 自适应高度输入框（contenteditable/textarea）

      一.用div模拟textarea div模拟输入域可以根据输入内容自动伸缩,而input和textarea输入内容较多时,高度固定,内容会显示不全. 1.坑1(IOS端无法输入) 在取消全局默认样 ...

  5. 微信端应用 ionic实现texarea 自适应高度

    最近公司项目,做微信端用到texarea 需要实现自适应高度的功能 当然自适应高度的方法很多网上找一大片,最直接的方式就是在使用到texarea的controller中添加js代码事件来实现,这中方式 ...

  6. textarea自适应高度

    最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个te ...

  7. Jquery实现textarea根据文本内容自适应高度

    本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...

  8. textarea自适应高度，div模仿textarea可编辑实现自适应高度，placeholder使用图标

    1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...

  9. 将textarea实现自适应高度及IE下滚动条不出现的bug

    1.<el-table-column label="备注" width="180"> <template scope="scope& ...

随机推荐

  1. C#制作高仿360安全卫士窗体<二>

    继上次C#制作高仿360安全卫士窗体<一>发布之后响应还不错,我的博客放肆雷特也来了不少的新朋友,在这里先谢谢大家的支持!我自己也反复看了一下觉得对不起大家,写的非常乱而且很少文字介绍.在 ...

  2. 【POJ】【1160】Post Office

    DP/四边形不等式 邮局,经典的四边形不等式例题! 关于四边形不等式的学习请看 赵爽论文<动态规划加速原理之四边形不等式> 题目总结&题解:http://blog.csdn.net ...

  3. 【BZOJ】【1061】【NOI2008】志愿者招募

    网络流/费用流 OrzOrzOrz,这题太神了不会捉. 题解:https://www.byvoid.com/blog/noi-2008-employee/ 这道题正确的解法是构造网络,求网络最小费用最 ...

  4. 在eclipse中配置maven

    http://pansanday.blog.163.com/blog/static/381662802012727103454743/ 从eclipse 3.6开始,eclipse有一个marketp ...

  5. iOS开发如何实现消息推送机制

    一.关于推送通知 推送通知,也被叫做远程通知,是在iOS 3.0以后被引入的功能.是当程序没有启动或不在前台运行时,告诉用户有新消息的一种途径,是从外部服务器发送到应用程序上的.一般说来,当要显示消息 ...

  6. orbis 链接 .a的问题

    orbis-clang.exe :error: no such file or directory : libppfxd_delta.a 这个东西真是见鬼 明明在那里就是说找不到 在依赖里libppf ...

  7. [百度空间] [原] Empty base class optimization

    最近遇到了一个诡异的问题, 数组的数据不对, 最后发现是两个类型的大小不一样导致的. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  8. windows 上配置solr5.2.1+solr4.3+中文分词器

    搭建5.2.1 1.下载 Tomcat解压后的目录为 D:\Program Files\Apache Software Foundation\apache-tomcat-8.0.22 solr解压后的 ...

  9. js实用功能

    //日期格式转换 Date.prototype.format = function (format) {     /*      * eg:format="yyyy-MM-dd hh:mm: ...

  10. ios 7 20像素解决

    1.if ([[[UIDevicecurrentDevice] systemVersion] floatValue] >= 7) { self.view.bounds = CGRectMake( ...