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 ...
随机推荐
- springboot初体验-不知道怎么创建spring-boot项目？
https://spring.io/projects/spring-boot/ 在以上地址找到 Quick start Bootstrap your application with Spring I ...
- docker，containerd，runc，docker-shim之间的关系
原文:https://blog.csdn.net/u013812710/article/details/79001463 关于containerd关于containerd的一些详解介绍,请参考cont ...
- python卸载重新安装，一键安装卸载前的所有安装的第三方插件
好多小可爱都有这样一个困扰,python有了一个大版本的更新,我也想更新,但是安装的好多第三方的库可怎么办呀,更新之后再去一个一个的安装,那可就烦死了. 在这里我来教大家如何快速去安装python更新 ...
- 经实验验证，修正对using namespace std的认识
备注①:name:符号.指的实体包括:变量.函数.类 备注②:认为全局命名空间也是一个包,在此称作 ROOT:: 或 global:: (这样就有了两个特别的包:一个是全局包,一个是std包.但对于编 ...
- Windows下载安装RabbitMQ教程
原文链接:http://www.studyshare.cn/software/details/1171/0一.下载 1.下载Erlang 官网下载:去下载 百度网盘下载:去下载 提取码:m1q0 2 ...
- js多个参数(追加参数)
/** * 多个参数 * @param fn * @param args * @param scope */ function multipleArguments(fn,args,scope){ if ...
- java接口中的成员方法和成员变量
接口的含义理解:接口可以理解成统一的"协议",而接口中的属性也属于协议中的内容;但是接口的属性都是公共的,静态的,最终的 接口的成员特点:A:成员变量 只能是常量.默认修饰符 pu ...
- Python 列表推导式、矩阵、格式化输出
列表推导式 列表推导式提供了从列表.元组创建列表的简单途径.语法: [表达式 for语句 if语句] 创建并返回一个列表.if语句可选. 示例: list1=[1,2,3,4] #使用元组也行 lis ...
- java web的转发与重定向
java web的转发与重定向 原创 2012年12月15日 11:51:39 19312 转发和重定向的区别 一.使用方法 转发:request.getRequestDispatcher(" ...
- noVNC 搭建
安装VNCSERVER 在使用noVNC之前,必须得先装vncserver,方法如下: yum -y install vnc-server 安装完成后,执行vncserver配置密码 命令:vncse ...