此textarea非彼textarea ，有经验的老司机们应该知道html标签contenteditable这个属性。

利用此属性使当前的标签成为可以输入的状态，等同于输入框。

演示地址：https://xibushijie.github.io/static/textareaHeihgAuto.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        #textarea {

            width: 100px;

            min-height: 20px;

            max-height: 70px;

            outline: 0;

            border: 1px solid #397EFF;

            font-size: 13px;

            overflow-x: hidden;

            overflow-y: auto;

            -webkit-user-modify: read-write-plaintext-only;

        }

        [contentEditable=true]:empty:not(:focus):before {

            content: attr(data-text);

        }

    </style>

</head>

<body>

    <div id="textarea" contenteditable="true" data-text="输入内容..."></div>

</body>

</html>

css实现 textarea 高度自适应的更多相关文章

  1. CSS两列高度自适应，右边自适应

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. textarea高度自适应自动展开

    在使用之前,推荐两个比较好的事件,分别是oninput和onpropertychange,IE9以下不兼容oninput.在textarea发生变化时,可以通过监听这两个事件来触发你需要的功能. te ...

  3. 实用小工具不定期合集(textarea 高度自适应、自动计算Y轴刻度、json转table)

    1.textarea高度自适应 这个非常有用,但是网上的解决方案都不尽人意,话不多说,上代码. function auto (elem) { var minHeight = 30 var change ...

  4. textarea高度自适应问题

    textarea中的文字如果过多,就会产生滚动条,一本分文本被遮盖住,不能看到所有的文本. 那么,如何才能让textarea的高度随输入内容多少,可以自动的改变高度呢? 解决思想: 1 利用conte ...

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

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

  6. css控制元素高度自适应

    可以采用元素定位 + padding 的方式使特定元素高度自适应. css 样式: html,body{ height:100%; margin:; padding:; } .wrap { heigh ...

  7. DIV+CSS左右列高度自适应问题

    其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点:一是在最外层加上overflow:hidden,然后在左边列加上margin-bottom:-9999px;padding-bottom: ...

  8. CSS技术让高度自适应减少很多不必要的检测

    高度自适应第一种情况 1.高度不去设置,或者高度设置auto 内容撑开父元素的高度.2.内容撑开父元素的高度 -> 最小高度的设置 min-height3.浮动元素添加高度自适应 -> 添 ...

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

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

随机推荐

  1. 正向代理 & 反向代理 & 透明代理

    正向代理(Forward Proxy) 概述 一般情况下,如果没有特别说明,代理技术默认说的是正向代理技术.关于正向代理的概念如下: 正 向代理(forward)是一个位于客户端[用户A]和原始服务器 ...

  2. Python中为什么没有++和–（自增/减）(转)

    原文地址:http://blog.csdn.net/guang09080908/article/details/47273775(侵删) 这两天看了一些网上各大互联网公司的面试题,发现腾讯特别喜欢考察 ...

  3. 已知X,Y独立，那么X^2与Y也独立

    考虑离散情况,  P{X^2=k} => P{X=sqrt(k)} 由X,Y独立可知, P{X=Sqrt(k}  | Y=y} =P{X=Sqrt(x)}, P{X^2=k | Y=y} =P{ ...

  4. Python中的虚拟环境的使用

    1.安装virtualenv pip3 install virtualenv 2.创建目录 mkdir Myproject cd Myproject 3.创建独立运行环境-命名 virtualenv ...

  5. 必须要注意的 C++ 动态内存资源管理(六)——vector的简单实现

    必须要注意的 C++ 动态内存资源管理(六)——vector的简单实现 十六.myVector分析         我们知道,vector类将其元素存放在连续的内存中.为了获得可接受的性能,vetor ...

  6. Java12新特性 -- 只保留一个 AArch64 实现

    现状 当前 Java 11 及之前版本JDK中存在两个64位ARM端口.这些文件的主要来源位于src/hotspot/cpu/arm 和 open/src/hotspot/cpu/aarch64 目录 ...

  7. Python中request的post请求报requests.exceptions.SSLError:

    今天发送一个post请求,提示错误 requests.exceptions.SSLError: HTTPSConnectionPool(host='user.zaful.com', port=443) ...

  8. springboot使用SpringTask实现定时任务

    SpringTask是Spring自主研发的轻量级定时任务工具,相比于Quartz更加简单方便,且不需要引入其他依赖即可使用. 只需要在配置类中添加一个@EnableScheduling注解即可开启S ...

  9. exports module.exports export export default之间的关系

    exports 和module.exports是CommonJS模块规范 export export default是ES6模块的规范,两者完全是不同的概念. node应用由模块组成,采用的是Comm ...

  10. H5混合开发中android终端和ios终端常见的兼容问题1

    转自 https://blog.csdn.net/xuehu837769474/article/details/80603898 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上 ...