需求

我们知道文本超出 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. 如何在ASP.NET Core Web API中使用Mini Profiler

    原文如何在ASP.NET Core Web API中使用Mini Profiler 由Anuraj发表于2019年11月25日星期一阅读时间:1分钟 ASPNETCoreMiniProfiler 这篇 ...

  2. 配置两个不同kerberos认证中心的集群间的互信

    两个Hadoop集群开启Kerberos验证后,集群间不能够相互访问,需要实现Kerberos之间的互信,使用Hadoop集群A的客户端访问Hadoop集群B的服务(实质上是使用Kerberos Re ...

  3. 关闭Postman 证书的验证

    1.问题背景 使用自己生成的SSL证书,用Postman访问失败.需要忽略SSL证书的验证 2.关闭Postman 证书的验证 在Settings-General中 关闭SSL certificate ...

  4. Workerman MySQL组件Connection用法总结

    一.初始化连接 $db = new \Workerman\MySQL\Connection('host', 'port', 'user', 'password', 'db_name'); 二.获取所有 ...

  5. 浅析ORACLE ERP系统维护方法

    笔者曾从事ORACLE ERP系统客户服务工作多年,在ERP系统维护工作中,深深体会到:ERP的系统维护工作看似平常,实则大有学问. ORACLE ERP系统是一个大型集成的软件系统,是一个企业全面共 ...

  6. Odoo Qweb语法

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826202.html 一:简介 QWeb是一个基于xml的模板引擎,用于生成HTML片段和页面. 模板指令 ...

  7. Buuctf-------WEB之admin

    1.抓包扫描一把梭,无事发生地说 注释里发现 万能密码试试,报错 用的flask,pythonweb 后面发现报错页面可以调试,嘿嘿嘿 康康我们发现了什么 拿去破解,无果 于是打算代码拿下来康康,em ...

  8. 2016年的EK工具

    什么是Exploit Kit? 预打包了安装程序.控制面板.恶意代码以及相当数量的攻击工具.通常基于PHP的一个软件. Exploit Kit经济体制 价格在成百上千美元: 可以按日/周/月来付租金: ...

  9. httprunner学习3-extract提取token值参数关联(上个接口返回的token，传给下个接口请求参数)

    前言 如何将上个接口的返回token,传给下个接口当做请求参数?这是最常见的一个问题了. 解决这个问题其实很简单,我们只需取出token值,设置为一个中间变量a,下个接口传这个变量a就可以了.那么接下 ...

  10. Kudu+Impala介绍

    Kudu+Impala介绍 概述 Kudu和Impala均是Cloudera贡献给Apache基金会的顶级项目.Kudu作为底层存储,在支持高并发低延迟kv查询的同时,还保持良好的Scan性能,该特性 ...