<!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. VIM 技巧 （一）全文统一添加

    大家应该有遇到过给整篇内容增加同样的东西的经历.例如给每行结尾增加分号.冒号等内容. 今天和大家分享下 关于此场景如何快速.高效的实现. 例如 Line one Line two Line three ...

  2. apple 官方文档 Push Notification Programming

    iOS Developer LibraryDeveloper Search Local and Push Notification Programming Guide PDF Table of Con ...

  3. 驱动笔记 - ioctl

    #include <linux/ioctl.h> 定义命令 _IO(type,nr) 没有参数的命令 _IOR(type,nr,datatype) 从驱动中读数据 _IOW(type,nr ...

  4. Unity动态加载和内存管理(三合一)

    原址:http://game.ceeger.com/forum/read.php?tid=4394#info 最近一直在和这些内容纠缠,把心得和大家共享一下: Unity里有两种动态加载机制:一是Re ...

  5. java.sql.SQLException: Connection is read-only. Queries leading to data modification are not allowed

    org.springframework.dao.TransientDataAccessResourceException: ### Error updating database. Cause: ja ...

  6. ZOJ3784 String of Infinity(AC自动机&&强连通分量)

    题意:给你n个禁止串,然后你只能用字符表的前m个字符去写一个无限长的串,要求是不能包含禁止串,而且串在后面不能出现循环 比赛的时候想的是先建一个自动机,然后将自动机确定化,不能到达的状态全部弄出来.但 ...

  7. ListView的item选中效果

    有时app会需要点击某个item并实现选中的效果,例如做pad时用Fragment实现的左侧列表右侧内容的效果,点击左侧某一个item后会高亮选中 有时简单的使用setSelected(boolean ...

  8. ARM系列产品

    ARM7系列 ARM9系列 ARM9E系列 ARM10E系列 SecurCore系列 Intel的StrongARM ARM11系列 Intel的Xscale 其中,ARM7.ARM9.ARM9E和A ...

  9. MYSQL - ORDER BY & LIMIT

    http://stackoverflow.com/questions/4708708/mysql-order-by-limit

  10. 从idea到ipo

    **************************************************************************************************** ...