需求

我们知道文本超出 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. Linux环境：VMware下windows虚拟机与linux主机进行文件共享的方法

    操作主要分两大步骤: 一.是对主机进行配置: 二.是在虚拟机上直接连接共享目录. 一.主机配置 1.打开VMware虚拟机,双击需要进行文件共享的虚拟机.如下图,双击CentOS 64位(以linux ...

  2. Java之路---Day14(内部类)

    2019-10-29-23:08:00 目录 1.内部类 2.成员内部类 3.局部内部类 4.局部内部类的final问题 5.匿名内部类 内部类: what:内部类(nested classes),面 ...

  3. JavaScript 之 String 对象

    String 对象 之前学习的是 基本数据类型 String 类型,现在讨论的是 String对象(包装类型). String的特点:字符串的不可变性. var str = 'abc'; str = ...

  4. 英语SouthRedAgate南红玛瑙

    南红玛瑙(SouthRedAgate)是玛瑙的一个种类,古称”赤玉”,质地细腻油润,是中国独有的品种.由于产量稀少,老南红玛瑙价格急剧上升.南红玛瑙曾被古人用之入药,养心养血. 现在的南红玛瑙已经和和 ...

  5. Ansible-概念

    控住节点 任何装有Ansible的机器.您可以从任何控制节点调用/usr/bin/ansible或来运行命令和剧本/usr/bin/ansible-playbook.您可以将任何安装了Python的计 ...

  6. FFMPEG 命令行工具- ffmpeg

    ffmpeg 简介 ffmpeg 用于转码的应用程序,命令格式: ffmpeg [options] [[infile options] -i infile]... {[outfile options] ...

  7. 百度地图公交线路查询，并绘制到地图上并获取所有路径经纬度点(可供echarts 路径图使用)

    github地址 https://github.com/a1115040996/MyHTML/tree/gh-pages/BDMap 源代码 <!DOCTYPE html PUBLIC &quo ...

  8. golang之数据转换

    golang按位取反符号和异或符号都是^. fmt.Printf("0x%X\n", 0xFF^0x55) var a uint8 = 0x55 fmt.Printf(" ...

  9. Flask基础之session验证与模板渲染语法(jinja2)

    目录 1.http传输请求头参数 2.Flask中request.data参数处理 3.Flask中request.json参数 4.Flask中的session管理 5.Flask中模板语法(if, ...

  10. linux cgroups简介（上）

    Linux CGroups简介 1.CGroups是什么 与Linux namespace对比来看,Linux namespace用来限制进程的运行范围或者运行环境的可见性,比如:uts限制进程读取到 ...