最近遇到一个需求，视频名称初始有个生成值，并且支持可以手动修改，修改后名称过长后换行高度随内容增加。刚开始想到用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. jersey2.26+spring5+jpa一步步搭建restful服务

    前言 首先,为什么想选择Jersey做restful服务呢?我个人比较喜欢它的插件化设计,可以方便的注入自己的全局处理逻辑.再一个就是可以生成wadl描述文件,供查询服务方法.所以在学习spring的 ...

  2. 利用alias在Linux下设置命令别名

    alias          //自定义命令="Linux命令"   alias          //查看当前系统里所有的自定义命令 unalias         //自定义命 ...

  3. ASP.NET没有魔法——ASP.NET MVC 模型绑定解析（上篇）

    前面文章介绍了ASP.NET MVC中的模型绑定和验证功能,本着ASP.NET MVC没有魔法的精神,本章内容将从代码的角度对ASP.NET MVC如何完成模型的绑定和验证进行分析,已了解其原理. 本 ...

  4. hdu 2047递推

    A[N]表示以E或者F结尾的情况下的方案数,B[N]表示以O结尾的情况下的方案数,F[N]=3*A[N-1]+2*B[N-1] 同时,A[N]=2*B[N-1]+2*A[N-1],B[N-1]=A[N ...

  5. 在SpringBoot中使用FluentValidator验证插件

    前言 在我们编写项目的时候,在controller中往往离不开对一些数据的校验.这里并不是说对于这些数据业务上面的校验,而是对这些数据进行空校验或者是长度校验等. 有些时候校验可以省略,根据业务的需要 ...

  6. Sping Boot入门到实战之入门篇（四）：Spring Boot自动化配置

    该篇为Sping Boot入门到实战系列入门篇的第四篇.介绍Spring Boot自动化配置的基本原理与实现.   Spring Boot之所以受开发者欢迎, 其中最重要的一个因素就是其自动化配置特性 ...

  7. gitlab启用https

    为了防止内网渗透,将gitlab服务的访问添加了ssl,具体步骤如下: 修改配置文件 [xieshuang@VM_177_101_centos gitlab]$ sudo vim /etc/gitla ...

  8. 后台模拟请求 HttpHelper 序列化 MD5 时间戳

    使用场景 C# 服务器后台调用其他服务器并处理 场景 /// <summary> /// 获取用户信息 /// </summary> /// <param name=&q ...

  9. 【java学习笔记】Properties

    Properties:可以持久化的映射,规定键和值的类型是String. Properties对象必须放到.properties文件中,其中properties文件默认为西欧编码,也因此不存储中文. ...

  10. 初次接触：DirectDraw

    第六章 初次接触:DirectDraw 本章,你将初次接触DirectX中最重要的组件:DirectDraw.DirectDraw可能是DirectX中最强大的技术,因为其贯穿着2D图形绘制同时其帧缓 ...