<!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. android 高德地图出现【定位失败key鉴权失败】

    如题:android 高德地图出现[定位失败key鉴权失败] 原因:使用的是debug模式下的SHA1,发布的版本正确获取SHA1的方式见: 方法二使用 keytool(jdk自带工具),按照如下步骤 ...

  2. 20、android解决方案（转载）

    目录: 1.广告 2.推送 3.云 4.统计 5.后端存储 6.地图 7.测试 8.托管 9.支付 10.音视频 11.社会化分享 12.存储 13.自动更新 14.轻开发 15.安全 16.图像 1 ...

  3. Android中的单位及测试相关概念

    android中的单位: in 英寸 pt 点距 px 像素  dp(dip) 密度无关的像素单位,自适应device屏幕的比例,通常涉及长宽高时采用 sp 与范围无关的像素单位,通常在设置字体大小时 ...

  4. 前端之JavaScript第二天学习(5)-JavaScript-语句

    JavaScript 语句 JavaScript 语句向浏览器发出的命令.语句的作用是告诉浏览器该做什么. 下面的 JavaScript 语句向 id="demo" 的 HTML ...

  5. IE6中布局常见问题

    1.众所周知,每个IE的版本都有两种模式,怪异模式(混杂模式)和标准模式.下图附上针对IE的hack. 2.另外有一种引进css的方法,也可以作为调整网站hack的方法:<!—[if IE 6] ...

  6. Beginners Guide To Learn Dimension Reduction Techniques

    Beginners Guide To Learn Dimension Reduction Techniques Introduction Brevity is the soul of wit This ...

  7. samba 常见问题

    今天帮一个朋友搭建samba服务器,发现总是无法正常访问,最后google+摸索搞定了,下面把遇到的问题和解决方法共享一下. 这里用的linux是centos版本6. 一开始遇到的问题是‘找不到网络路 ...

  8. date format 精辟讲解

    link: http://stackoverflow.com/questions/19533933/nsdateformatter-how-to-convert-wed-23-oct-2013-045 ...

  9. nginx 杂记

    接触nginx一段时间,有些自己的心得,偶尔在网上会看到一些细小的知识点,总结于此 nginx是以多进程的方式来工作的.nginx在启动后,会有一个master进程和多个worker进程. maste ...

  10. 基于jQuery很牛X的批量上传插件

    上传功能应该是每个网站必备的工具之一,因此出现了出现了很多各式各样的上传插件! 本文基于个人经验和使用从插件的:交互体验,易用性,文档,美观度出发,为大家推荐三款很NX的批量上传插件! 下面三款插件的 ...