<!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. POSIX 线程详解 一种支持内存共享的简捷工具

    线程是有趣的 了解如何正确运用线程是每一个优秀程序员必备的素质.线程类似于进程.如同进程,线程由内核按时间分片进行管理.在单处理器系统中,内核使用时间分片来模拟线程的并发执行,这种方式和进程的相同.而 ...

  2. UML 用例图，时序图，活动图的定义以及区别

    1.用例图,时序图,活动图的定义 1.用例图:  用例图描述了系统提供的一个功能单元.用例图的主要目的是帮助开发团队以一种可视化的方式理解系统的功能需求,包括基于基本流程的"角色" ...

  3. C#--简单的串口通信程序

    前几天做毕业设计,其中要用到串口和下位机进行通信,于是自己捣鼓了一个简单的串口通信程序. 在做通信之前要先弄一个SerialPort组件出来,当然也可以通过程序来创建.本次设计中采用的是拖的winfo ...

  4. Java Api与HBase交互实例

    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hb ...

  5. JS获取Url参数的通用方法

    //获取URL中的参数 function request(paras) { var url = location.href.replace('#', ''); var paraString = url ...

  6. Eclipse环境下配置spket中ExtJS提示

    使用eclipse编写extjs时,一定会用到spket这个插件,spket可以单独当作ide使用,也可以当作eclipse插件使用,我这里是当作eclipse的插件使用的,下面来一步步图解说明如何配 ...

  7. ResourceBundle使用

    一.认识国际化资源文件   这个类提供软件国际化的捷径.通过此类,可以使您所编写的程序可以:          轻松地本地化或翻译成不同的语言          一次处理多个语言环境          ...

  8. poj 3613(经过N条边的最短路)

    题目链接:http://poj.org/problem?id=3613 思路:我们知道如果矩阵A表示经过1条边的方案数,那么A^N矩阵就代表这经过N条边的方案数,而本题中要求经过N条边的最短距离,于是 ...

  9. Java集合框架(三)

     Map Map集合:该集合存储键值对,一对一对的往里存,而且要保证键的唯一性. Map |------HashTable:底层是哈希表数据结构,不可以存入null键null值.该集合是线程同步的.J ...

  10. Android 注入详解

    Android下的注入的效果是类似于Windows下的dll注入,关于Windows下面的注入可以参考这篇文章Windows注入术.而Android一般处理器是arm架构,内核是基于linux,因此进 ...