需求

我们知道文本超出 textarea 高度后，textarea 就会出现滚动条，需求就是让 textarea 高度跟随文本高度变化，屏蔽滚动条，原来做过用js去监听文本行数，然后改变文本框的高度，这实在是麻烦，而且效果不佳，接下来就用简单的方法来实现。

实现

很简单，给 div 加上H5新属性 contenteditable 就行了，来看：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .test{

            width: 200px;

            min-height: 50px;

            border: 1px solid #999999;

        }

    </style>

</head>

<body>

    <div class="test" contenteditable="true"></div>

</body>

</html>

效果大概就是这样，此时高度会跟随内容变化

emmm...貌似不比textarea好看，而且 div 没有 placeholder 属性，OK优化一下，再用css模拟 placeholder 属性，请看：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .test{

            width: 200px;

            min-height: 50px;

            font-size: 12px;

            padding: 5px;

            border: 1px solid #999999;

        }

        .test:empty::before{

            color: #EEEEEE;

            content: attr(placeholder);

        }

    </style>

</head>

<body>

    <div class="test" contenteditable="true" placeholder="亲，请输入您的评价~"></div>

</body>

</html>

效果是这样

个人觉得不错了，如果觉得丑那就再优化一下样式，比起用 js 监听高度变化，这个更实用，一个字，怎么简单怎么来！

div模拟textarea且高度自适应的更多相关文章

  1. div仿textarea使高度自适应

    今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法…… <d ...

  2. div模拟textarea实现高度自增长

    今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...

  3. div模拟textarea以实现高度自适应实例页面

    作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...

  4. div模拟textarea文本域轻松实现高度自适应

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

  5. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  6. div模拟textarea自适应高度

    之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...

  7. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

  8. H5新增属性contenteditable（不用JS，实现div模拟textarea高度自增长）

    无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...

  9. textarea下高度自适应

    1,背景:textarea的高度不会随内容的增加而自适应,会出现滚动条 解决方案: 1)使用div模拟textarea  使用h5的属性    <div contenteditable=&quo ...

随机推荐

  1. C#读写修改设置调整UVC摄像头画面-色调

    有时,我们需要在C#代码中对摄像头的色调进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄像 ...

  2. 解决v-html无法理解vue模版的问题-动态获取模版，动态插入app并使用当下app状态数据需求

    很多情况下,我们需要使用动态的html作为某个dom元素的inner html,如果这个内容是标准的html的话,则v-html能够圆满满足需求,而如果内容包含了vue组件,则使用v-html就不能达 ...

  3. 【转载】C#通过Remove方法移除DataTable中的某一列数据

    在C#中的Datatable数据变量的操作过程中,有时候我们需要移除当前DataTable变量中的某一列的数据,此时我们就需要使用到DataTable变量内部的Columns属性变量的Remove方法 ...

  4. pandas 之 字符串处理

    import numpy as np import pandas as pd Python has long been a popular raw data manipulation language ...

  5. java读取Properties文件的方法

    resource.properties的内容: com.tsinkai.ettp.name=imooc com.tsinkai.ettp.website=www.imooc.com com.tsink ...

  6. 【RabbitMQ】RabbitMQ的安装以及基本概念的介绍

    一.如何安装 https://www.cnblogs.com/756623607-zhang/p/11469962.html 二.基本概念介绍 ·Broker:可以理解为消息队列服务器的实体,它是一个 ...

  7. Linux centos关机和重启命令

    Linux centos重启命令: 1.reboot   普通重启 2.shutdown -r now 立刻重启(root用户使用) 3.shutdown -r 10 过10分钟自动重启(root用户 ...

  8. Socket网络编程-UDP编程

    Socket网络编程-UDP编程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.UDP编程概述 1>.UDP服务端编程流程 创建socket对象.socket.SOCK_ ...

  9. JVM&G1 GC 学习笔记（一）

    在入门学习JVM的过程中,我们需要先了解关于JVM的知识中有哪些关键词或关键术语,今天在看完书后我想记录下来. Xms64mb    虚拟机初始化时设置内存大小为64mb Xmx256mb  设定虚拟 ...

  10. css3过渡动画 transition

    transition CSS3 过渡是元素从一种样式逐渐改变为另一种的效果. 要实现这一点,必须规定两项内容: 指定要添加效果的CSS属性 指定效果的持续时间 例如 这是下面代码的预览界面预览界面 & ...