最近遇到一个需求，视频名称初始有个生成值，并且支持可以手动修改，修改后名称过长后换行高度随内容增加。刚开始想到用input但是发现input不支持换行。后来用了textarea，用js来控制，下面是实现方式：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <textarea cols="30" style="height: 22px; width: 100px; padding: 3px 8px;" onkeyup="changeH(this)">视频</textarea>

    <script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>

    <script>

        function changeH(arg) {

            var target = $(arg)[0];

            $(arg).innerHeight(target.scrollHeight);

        }

    </script>

</body>

</html>

因为项目textarea有多条并且是自动生成的，所以用行内onkeyup，把this传到监听函数中,然后取得元素的原生对象，来获取scrollHeight,因为用jquery没有取到这个值。scrollHeight解释如下：

Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

scrollHeight即是textarea内容的高度（不包括padding,border,marin），然后用把这个值设置为这个对象的innerHeight（内容的高度，不包括padding,border,margin）.即实现在手动输入textarea内容时设置其高度。实现textarea高度随内容自适应。

textarea高度随内容自适应的更多相关文章

  1. Textarea高度随内容自适应地增长，无滚动条

    <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; char ...

  2. jQuery实现textarea高度根据内容自适应

    //jQuery实现textarea高度根据内容自适应 $.fn.extend({ txtaAutoHeight: function () { return this.each(function () ...

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

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

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

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

  5. textarea高度随着内容的多少而变化，高度可以删减

    问题:可以多行输入,并且输入框的高度随着内容的多少而变化,输入框的高度不能只增不减 由于 input 只能单行输入 textarea可以多行输入,并且高度可以随着内容的增加而增加,但是当内容删减的时候 ...

  6. iframe高度随内容自适应的方法

    我们知道,iframe最大的问题,就是高度的问题,如果你内容的高度是变化,要么你就给你的容器写个固定的高度,如果内容是未知的,显然这个方法并不能达到我们的想要的效果,要么就是通过js来解决这个问题. ...

  7. 左边label随着右边textarea高度自适应

    左边label随着右边自适应 近期项目中,有表单需求 默认展示两列,当内容多的时候,可以展示一列 左边列 <div> <label>备注</label> <s ...

  8. 实现textarea高度自适应内容，无滚动条

    最近接触到一个很好用的js插件,可以实现textarea高度随内容增多而改变,并且不显示滚动条,推荐给大家: http://www.jacklmoore.com/autosize/

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

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

随机推荐

  1. 整理的linux面试运维题

    如何在非交互模式下把 /home/example/下所有.conf文件中的 192.168.0.2 改成 db01 ?   find /home/example/ -type f -name &quo ...

  2. CentOS 7 安装 Nginx 反向代理 node

    安装 nginx yum install epel-release yum install nginx 配置 nginx sudo vim /etc/nginx/nginx.conf, 改成下面配置: ...

  3. Python面向对象篇（3）-封装、多态、反射及描述符

    1. 多态 多态,最浅显的意识就是同一事物具有多种形态,这很好理解,动物是一个大类,猫类属于动物类,狗类属于动物类,人也是属于动物类,那能理解成,猫.狗.人是一样的吗?当然不是,还有,水,分为液体.固 ...

  4. Java 面向对象三大特征之一： 多态

    多态与类型转换 子类重写父类方法 1)位置:子类和父类中有同名的方法 2)方法名相同,返回类型和修饰符相同,参数列表相同       方法体不同 多态的优势和应用场合 多态:同一个引用类型,使用不同的 ...

  5. 一个简单清晰的Redis操作类

    <?php /** * redis处理的二次封装 * */ class Redis{ private $_redis; private $_config; public function __c ...

  6. hihoCoder 1036 Trie图 AC自动机

    题意:给定n个模式串和一个文本串,判断文本中是否存在模式串. 思路:套模板即可. AC代码 #include <cstdio> #include <cmath> #includ ...

  7. Ambari部署HDP：HBase Master启动后自动消失

    这是第一次出勤部署产品.遇到不可控问题,解决,写个心得.记录一下吧^^ 在排查问题的过程中,学到不少知识. (1)centos系统盘和数据盘分开,装操作系统的人没有将IT的空间分配出来,所以分区,自动 ...

  8. java数组：去重，增加，删除元素

    import java.util.List; import java.util.ArrayList; import java.util.Set; import java.util.HashSet; p ...

  9. FULL HD

    FULL HD(全高清)是Full High Definition的简写,是指物理分辨率高达1920×1080显示(包括1080i和1080P),其中i(interlace)是指隔行扫描:P(Prog ...

  10. 如何利用Plxmon工具进行在线烧录PCI卡的EEPROM

    PLXMON是PLX公司提供的用于在线烧录PCI卡的EEPROM的工具. 烧录EEPROM有两种方式,一是比较传统的方法,即采用烧录机进行烧录.采用这种方式时,在调试过程中EEPROM需采用插件式封装 ...