div模拟textarea且高度自适应
需求
我们知道文本超出 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且高度自适应的更多相关文章
- div仿textarea使高度自适应
今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法…… <d ...
- div模拟textarea实现高度自增长
今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...
- div模拟textarea以实现高度自适应实例页面
作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...
- div模拟textarea文本域轻松实现高度自适应
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
- div模拟textarea自适应高度
之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...
- 使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
- H5新增属性contenteditable（不用JS，实现div模拟textarea高度自增长）
无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...
- textarea下高度自适应
1,背景:textarea的高度不会随内容的增加而自适应,会出现滚动条 解决方案: 1)使用div模拟textarea 使用h5的属性 <div contenteditable=&quo ...
随机推荐
- AD常用快捷键
元器件翻转 : 空格 按住shift拖动元器件实现自动编号 取消布线 : 工具(Tools)取消布线(Un_Route)全部(AII) 栅格变为点阵 : 按ctrl+G——打开cartesian Gr ...
- <!DOCTYPE html> 详解
前段时间的.netcore web应用程序的项目里面使用Frameset与Frame时候出现了一个问题就是使用不了,今晚准备测试一个bug却得到意外收获o(∩_∩)o 哈哈, 找到了最终原因funny ...
- AppiumLibrary 关键字文档
http://serhatbolsu.github.io/robotframework-appiumlibrary/AppiumLibrary.html#Start%20Activity
- ajax分页和搜索
//控制器function show(Request $request){ $page=$request->page?$request->page:1; $size=4; $pian=($ ...
- vue中的插槽
匿名插槽 // comp1 <div> <slot></slot> </div> // parent <comp>hello</com ...
- fatal: unable to connect to github.com npm install fail问题
解决方法 git config --global url."https://".insteadOf git://
- jquery问题，如何调用带this的函数？
这样写: 1 2 3 4 5 6 7 8 9 10 11 12 $(".aa").on("mouseout",function(){ var obj = ...
- centos安装redis并且加入开机启动
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_41114593/articl ...
- 一款APP的完整开发流程 （转载）
来源:https://www.sohu.com/a/239089829_100063940 近年来,在市场和政策的双轮驱动下,我国服务外包产业快速发展,服务智能化趋势显现.随着企业核心业务外包活动的日 ...
- MongoDB(NoSQL) 非关系型数据库
目录 简单了解 mongoDB 简单使用mongoDB 简单了解 mongoDB # NoSQL 泛指非关系型的数据库 NoSQL(NoSQL = Not Only SQL ),意即"不仅仅 ...