此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. LDAP -- ldap 的cn, ou, dc的含义

    1. LDAP的存储规则 区分名(DN,Distinguished Name) 和自然界中的树不同,文件系统/LDAP/电话号码簿目录的每一片枝叶都至少有一个独一无二的属性,这一属性可以帮助我们来区别 ...

  2. Java-JUC（十二）：有3个线程。线程A和线程B并行执行，线程C需要A和B执行完成后才能执行。可以怎么实现？

    方案(一)CountDownLatch: 使用CountDownLatch+Semaphore方式实现: import java.util.concurrent.CountDownLatch; imp ...

  3. MacOS安装rJava

    rJava出了名的难装,一大堆问题. 核心的问题: 1. java版本问题,最好用1.8版本的java 2. 编译器的问题 3. 相关头文件header的问题 之前几次装过,但都放弃了,这次花了一下午 ...

  4. cas 3.5.3服务器搭建+spring boot集成+shiro模拟登录（不修改现有shiro认证架构）

    因为现有系统外部接入需要,需要支持三方单点登录.由于系统本身已经是微服务架构,由多个业务独立的子系统组成,所以有自己的用户认证微服务(不是cas,我们基础设施已经够多了,现在能不增加就不增加).但是因 ...

  5. pandas filter数据筛选

    https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&shareId=400000000398 ...

  6. Servlet 添加 Cookie 返回 500 的问题

    在学习 Servlet 中,学习 Cookie 的时候,往 response 中添加 Cookie ,结果出现 500 的错误 Cookie cookie1 = new Cookie(COOKIE_N ...

  7. Nginx 配置 HTTP 代理

    配置如下 #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; ...

  8. git bush 无法使用箭头进行选择

    1 找到git bash 的安装目录,找到bash.bashrc文件, 2 在文件的尾部加上:alias vue='winpty vue.cmd', 3 重启git bash 即可 来自:https: ...

  9. Python Tkinter 之Listbox控件

    Listbox为列表框控件,它可以包含一个或多个文本项(text item),可以设置为单选或多选.使用方式为Listbox(root,option...). 常用的参数列表如下: 一些常用的函数:

  10. Vue利用搜狐获取公网ip地址

    在index.html中添加代码: <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script> ...