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 ...
随机推荐
- 简单实现python调用c#dll动态链接库
在python调用c#dll库时要先安装库clr,即安装pythonnet,参考文章:https://www.cnblogs.com/kevin-Y/p/10235125.html(为在python中 ...
- PHP面试题2019年腾讯工程师面试题和答案
一.单选题(共29题,每题5分) 1.PHP执行的时候有如下执行过程:Scanning(Lexing) - Compilation - Execution - Parsing,其含义分别为: A.将P ...
- 43、css实现镂空半圆环
<style> .circle { position: relative; box-sizing: border-box; } .big { width: 140px; height: 1 ...
- 如何将一个div盒子水平垂直都居中？
html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...
- Java JDBC事务
JDBC默认是自动提交,事务是关闭的,statement|preparedStatement.executeUpdate()或excute()执行增删改,执行一次就提交一次(自动同步到数据库). JD ...
- es倒排索引原理解析
倒排索引原理 普通的存储方式是给每个文档编一个序号 然后让这个序号对应单个文档的所有内容 如果用这样的方式查找 当需要查找某个单词的时候需要遍历所有的文档集合 查找文档的效率会非常的慢 2.基本 ...
- Linux定时任务运行thinkPHP某个方法
先上实力: 1.查看正在执行的crontab,用命令crontab -l ,这样就可以看到哪些任务一直在执行了.2.crontab -e 自动打开文件 编辑定时任务程序 在打开的页面中点击“i”键 ...
- IGV解读
复制于:https://www.cnblogs.com/leezx/p/5603481.html 整合基因组浏览器(IGV)是一种高性能的可视化工具,用来交互式地探索大型综合基因组数据.它支持各种数据 ...
- nginx centos7 出现403 403 Forbidden
nginx访问时报403, 于是查看nginx日志,路径为/var/log/nginx/error.log.打开日志发现报错Permission denied,详细报错如下: 1. open() ...
- Fiddler抓websocket协议的包，用jmeter做并发测试
1.Fiddler: 左边为ws请求url.右边为请求数据,响应数据 jmeter: