原文链接

方法一(jquery):

$('textarea').each(function () {
  this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
});

方法二:

function setHeight(element) {
  $(element).css({'height':'auto','overflow-y':'hidden'}).height(element.scrollHeight);
}
$('textarea').each(function () {
  setHeight(this);
}).on('input', function () {
  setHeight(this);
});

textarea输入框随内容撑开高度的更多相关文章

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

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

  2. 文本框textarea根据输入内容自适应高度 和输入中文和数字换行解决方法

    textarea内容可从后台读取或手动输入,常规输入后中文和数字会出现换行问题 <style> #textarea { display: block; margin: 0 auto; ov ...

  3. textarea文本域轻松实现高度自适应

    转载:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 今天需要些一个回复评论的页 ...

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

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

  5. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  6. UIWebView中加载HTML的Table,td设置百分比宽度并且宽度不被里面的内容撑开

    正常情况下,iOS使用WebView加载HTML的Table时,为了让Table适应屏幕宽度,会使用百分比设置td的宽度,但是由于td中的内容过多,td会被撑开,导致整个Table的宽度会变宽,超出屏 ...

  7. textarea输入框限制字数(JS)

    第一种: <textarea onkeyup="checkLen(this)"></textarea> <div>您还可以输入 <span ...

  8. 设置DIV根据内容自动调整高度的三个方法

    Div即父容器在Firefox.Chrome.Safari中不会根据内容自动调节高度,我们看下面的HTML代码: <divid="main"><divid=&qu ...

  9. 工作记录(JS向textarea添加固定内容、通过固定字符将字符串分割为数组)

    第一个是在 textarea 输入框中添加固定的内容. 代码如下: <textarea id="text" cols="30" rows="10 ...

随机推荐

  1. 简单的 php 防注入、防跨站 函数

    /** * 简单的 php 防注入.防跨站 函数 * @return String */ function fn_safe($str_string) { //直接剔除 $_arr_dangerChar ...

  2. php 计算本周星期一、本月第一天 本月最后一天 下个月第一天

    本周一echo date('Y-m-d',(time()-((date('w')==0?7:date('w'))-1)*24*3600)); //w为星期几的数字形式,这里0为周日 本周日 echo  ...

  3. p2 休眠模式

    如有错误,忘请指出. 才入手p2.p2有全局休眠模式,和钢体体眠模式.钢体能控制 body.allowSleep world.NO_SLEEPING 不允许休眠world.BODY_SLEEPING ...

  4. 【C++】C++的构造函数

    构造函数是特殊的成员函数,只要创建类类型的对象,都要执行构造函数.构造函数的工作是保证每个对象的数据成员具有合适的初始值. class Sales_Item { public: //operation ...

  5. 【数据库】Mysql更改默认引擎为Innodb的步骤方法

    前言 InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定. 基本的差别为:MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持.M ...

  6. Web模块:spring-boot-starter-web

    spring-boot-autoconfigure-1.5.1.RELEASE.jar!/org/springframework/boot/autoconfigure/web 上述jar的web包下, ...

  7. Using the command line to manage files on HDFS--转载

    原文地址:http://zh.hortonworks.com/hadoop-tutorial/using-commandline-manage-files-hdfs/ In this tutorial ...

  8. 【JavaScript】jsp表格页面记录

    页面效果如下: jsp代码如下(里面引入了很多其他js文件,很多方法调用来自其他js): <%@ page language="java" contentType=" ...

  9. Hyperledger Fabric 实战(十二): Fabric 源码本地调试

    借助开发网络调试 fabric 源码本地调试 准备工作 IDE Goland Go 1.9.7 fabric-samples 模块 chaincode-docker-devmode fabric 源码 ...

  10. Mysql局域网访问授权

    如果允许用户myuser从ip为192.168.1.1的主机连接到mysql服务器,并使用password作为密码 GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'1 ...