需求

我们知道文本超出 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. @interface __ annotation 子类可以继承到父类上的注解吗--有结论了

    博客分类: Java/J2se   作者:赵磊 博客:http://elf8848.iteye.com 不了解注解基础知识的请先看<JDK 5 Annotation\注解\注释\自定义注解> ...

  2. MySQL之命令行简单操作MySQL(二)

    一:命令行连接数据库 打开终端,运行命令mysql -uroot -p (p后面加密码,可以直接加,也可以回车在下一行输入,为了不暴露密码,回车在下行输入 退出:exit或quit 查看版本信息: s ...

  3. Beego 学习笔记11：文件的上传下载

    文件的上传和下载 1->文件的上传 文件的上传,采用的是uploadify.js这个插件. 本事例实现的是上传图片文件,其他的文件上传也一样. 2->文件的下载 文件的下载有两个实现的方式 ...

  4. 28、IE报vuex requires a Promise polyfill in this browser问题解决

    解决方法第一步: 安装 babel-polyfill . babel-polyfill可以模拟ES6使用的环境,可以使用ES6的所有新方法 npm install --save babel-polyf ...

  5. npm ERR! code ELIFECYCLE webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`

    “E:\Program Files\JetBrains\WebStorm 2018.1.4\bin\runnerw.exe” G:\node\nodejs\node.exe G:\node\nodej ...

  6. php curl 转为 x-www-form-urlencoded 方式的坑

    网上转变的方法基本都是写添加下面这句: curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-Type: application/x-www-fo ...

  7. Numpy和Pandas的使用入门

    Numpy Numpy基本数据结构 np.array()函数接受一个多维list,返回对应纬度的矩阵 vector = np.array([1, 2, 3, 4]) matrix = np.array ...

  8. getResourceAsStream的路径问题

    1.Class类的getResourceAsStream this.getClass().getResourceAsStream("/resource.properties"); ...

  9. 个人推荐的Java邮件配置

    # 大部分host都是smtp.加上你邮箱@后面的域名spring.mail.host=smtp.localhost.com spring.mail.username= spring.mail.pas ...

  10. httprunner学习19-重复执行用例

    前言 使用httprunner做接口测试过程中,在工作中会遇到这种场景,发现某个接口不稳定,想重复运行100次用例,甚至1000次,看成功率. yml脚本 - config: name: httpbi ...