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

    最近听见有人说die和exit区别,bula~bula.决心一探究竟. 翻了翻PHP 5.6的源码(源码的位置为zend目录下zend_language_scanner.l大约是1014~1020行) ...

  2. 洛谷P3369 【模板】普通平衡树（Treap/SBT）

    洛谷P3369 [模板]普通平衡树(Treap/SBT) 平衡树,一种其妙的数据结构 题目传送门 题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入x数 删除 ...

  3. 本地Git搭建并与Github连接

    本地Git搭建并与Github连接 git 小结 1.ubuntu下安装git环境 ubuntu 16.04已经自带git ,可以通过下列命令进行安装与检测是否成功安装 sudo apt-get in ...

  4. 重磅发布：《阿里巴巴Android开发手册(规约)》

    1.前言 阿里巴巴于近日为广大程序员再送上重磅开春好礼:<阿里巴巴Android开发手册(规约)>.该开发规范在阿里内部经过了长期的修缮,现已总结成册,向所有移动开发者.技术爱好者开放,希 ...

  5. Linux常用命令(精选)

    chmod -R 777 文件夹名       // -R表示递归给文件及文件夹内文件更改权限,r(4),w(2),x(1),chmod -a+rwx / chmod -u+w -g+r -o +x ...

  6. C++ stl 怎么打印内存内容？

    #include <iostream> #include <string> #include <sstream> #include <iomanip> ...

  7. Android安全机制

    1)Android是基于Linux内核的,因此Linux对文件权限的控制同样适用于Android.在Android中每个应用都有自己的/data/data/包名文件夹,该文件夹只能该应用访问,而其他应 ...

  8. BZOJ3224/洛谷P3391 - 普通平衡树(Splay)

    BZOJ链接 洛谷链接 题意简述 模板题啦~ 代码 //普通平衡树(Splay) #include <cstdio> int const N=1e5+10; int rt,ndCnt; i ...

  9. SpringCloud入门1-服务注册与发现(Eureka)

    前言 Oracle转让Java,各种动态语言的曝光率上升,Java工程师的未来在哪里?我觉得Spring Cloud让未来有无限可能.拖了半年之久的Spring Cloud学习就从今天开始了.中文教材 ...

  10. javascript模块化编程库require.js的用法

    随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...