最近遇到一个需求，视频名称初始有个生成值，并且支持可以手动修改，修改后名称过长后换行高度随内容增加。刚开始想到用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-PATH_环境变量

    PATH变量         是linux系统里的一个环境变量,系统已经定义好了,我们不需要再定义. 作用:         是linux里使用的命令都存在在PATH变量后面指定的目录下,我们使用命令 ...

  2. [记录]Zabbix3.4配置监控Oracle12c的存活状态和表空间使用率

    Zabbix3.4配置监控Oracle的存活状态和表空间使用率 1.安装zabbix3.4 agent: # rpm -ivh http://repo.zabbix.com/zabbix/3.4/rh ...

  3. Failure to transfer org.apache.maven:maven-archiver:pom:2.5 from http://repo.maven.apache.org/ maven2 was cached in the local repository, resolution will not be reattempted until the update interv

    Failure to transfer org.apache.maven:maven-archiver:pom:2.5 from http://repo.maven.apache.org/  mave ...

  4. 初识Vue——模板语法

    一.插值 1.文本 数据绑定最常见的形式是使用双大括号({{  }}--"Mustache"语法)的文本插值 <div class="mustache"& ...

  5. 简单了解下OSI七层模型的作用以及常见网络协议含义和所用端口

    OSI七层模型及每层的作用 包括:物理层.数据链路层.网络层.传输层.会话层.表示层.应用层物理层用来建立.维护.断开物理连接数据链路层建立逻辑链接.进行硬件地址寻址.差错校验等功能网络层进行逻辑地址 ...

  6. Mac下VirtualBox共享文件夹设置

    环境:CentOS7.2最小化安装 步骤: 先安装必要软件包 yum install -y gcc gcc-devel gcc-c++ gcc-c++-devel make kernel kernel ...

  7. POJ - 3268 单源最短路

    题意:给定一些有向边,以及一个目的地,从某个点到达目的地,再从目的地回到那个点.共有n个点,问这n个点花费最大是多少? 思路:从目的地回去直接把目的地作为源点即可.那么从某个点到达目的地应该如何得到最 ...

  8. HDU - 1584 IDA*

    思路:裸的IDA*,估计当前状态至少需要多少距离才能达到目标状态,剪枝即可.每一墩牌只需记录其最上面和最下面的牌型即可完成移动. AC代码 #include <cstdio> #inclu ...

  9. HDU - 1172

    思路:假设答案是x,那么x必定满足所有语句给定的条件.例如3585和4815就有2个相同的数,1和相同的位. 只要这个数满足所有条件,那么就是一个可能的答案,当答案数量超过1个时,就是"No ...

  10. LOJ6002 - 「网络流 24 题」最小路径覆盖

    原题链接 Description 求一个DAG的最小路径覆盖,并输出一种方案. Solution 模板题啦~ Code //「网络流 24 题」最小路径覆盖 #include <cstdio&g ...