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 ...
随机推荐
- SQL Server优化之SET STATISTICS开关（转载）
一.准备工作 缓存对于某个查询的性能影响十分之大,所以优化之前要清空缓存. 清除Buffer Pool里面的所有缓存 DBCC DROPCLEANBUFFERS 清除Buffer Pool里的所有缓存 ...
- 2019 盛天网络java面试笔试题 （含面试题解析）
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.盛天网络等公司offer,岗位是Java后端开发,因为发展原因最终选择去了盛天网络,入职一年时间了,也成为了面 ...
- Python基础7
深复制 & 浅复制 列表,字符串 都有深浅复制,用 id() 函数来看 所谓“旧瓶装新酒,新瓶装旧酒”
- 【转载】如何查看本机电脑的公网IP
在实际使用电脑的过程中,很多时候我们需要知道本地电脑的当前公网IP地址,我们都知道个人电脑的公网IP是不固定的,可能每天的对外公网IP都不一样,如果要查看当前本机电脑的对外公网IP,方法也很简单,直接 ...
- 网址URL分解
http://www.joymood.cn:8080/test.php?user=admin&pwd=admin#login 1.location.href:得到整个如上的完整url 2.lo ...
- phpStudy配置多站点多域名和多端口的方法
切记:要想多个域名指向同一个项目,必须将phpstudy的根目录指向你项目所指的地方(原根目录是WWW),修改位置(其他菜单选项 - 软件设置 - 端口常规设置 - 网站目录) 站点:类似于 WWW ...
- Java 之 线程的生命周期（线程状态）
一.线程的生命周期 (1)新建状态 new 好了一个线程对象,此时和普通的 Java对象并没有区别. (2)就绪 就绪状态的线程是具备被CPU调用的能力和状态,也只有这个状态的线程才能被CPU调用.即 ...
- 全网最全Selenium相关资源汇总
官网: Selenium官网:https://docs.seleniumhq.org Selenium github: https://github.com/SeleniumHQ/selenium 文 ...
- flask建表遇到的错误： flask,sqlalchemy.exc.OperationalError: (MySQLdb._exceptions.OperationalError) (1071, 'Specified key was too long; max key length is 767 bytes')
error:flask,sqlalchemy.exc.OperationalError: (MySQLdb._exceptions.OperationalError) (1071, 'Specifie ...
- ML-软间隔(slack)的 SVM
Why Slack? 为了处理异常值(outlier). 前面推导的svm形式, 是要求严格地全部分对, 基于该情况下, 在margin 的边界线 线上的点, 只能是支持向量. \(min_w \ \ ...