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 ...
随机推荐
- FindWindow和FindWindowEx函数使用
FindWindow( lpClassName, {窗口的类名} lpWindowName: PChar {窗口的标题} ): HWND; {返回窗口的 ...
- jsp代码中实现下拉选项框的回显代码
用到了c标签库:首先要在jsp中导入jstl的核心库标签 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/js ...
- .NET CORE 动态加载 DLL 的问题
有个系统, 需要适应不同类型的数据库(同时只使用其中一种),如果把数据库操作层提取出来,然后针对不同的数据库使用不同的 DLL, 再根据不同的项目使用不同的库, 在以前的 ASP.NET 中, 直接把 ...
- CENTOS7-JAVA模拟CPU占用高及排查( 转)
环境 centos7 1核2GB Java8 模拟cpu占用高 新建一个名为jvm-learn的springboot项目 模拟代码如下 import org.springframework.boot. ...
- JavaScript 变量与注释
一.变量 ECMAScript 的变量是松散类型的,所谓松散类型就是可以用来保存任何类型的数据. 换句话说,每个变量仅仅是一个用于保存值的占位符而已.定义变量时要使用 var 操作符(注意 var 是 ...
- EXCHANGE上冒充任意用户--Exchange Server权限提升漏洞(CVE-2018-8581)分析
0x00 前言 这是我们2018年Top 5趣案系列中的第三个案例.这些漏洞都有一些因素使它们从今年发布的大约1,400个报告中脱颖而出.今天我们将分析一个Exchange漏洞,它允许任何经过身份验证 ...
- Ubuntu 下搭建VNC服务器
Ubuntu 18.04 搭建VNC服务器https://www.jianshu.com/p/f58fe5cdeb5f ubuntu16.04 vncserver配置https://blog.csdn ...
- 将浏览器地址栏中的 Request 参数显示成中文
希望实现:在当 JSP 页面发起请求,或者 Servlet 跳转时,地址栏中的参数可以显示成中文. 在通常情况下,浏览器地址栏中的URL地址为了适配不同的浏览器,会将URL地址信息转码为"I ...
- 【转载】深入剖析自定义View之onMeasure
1.前言 自定义View中我们看到很多都重写了onMeasure方法,那么我们首先得知道onMeasure是做什么的.onMeasure中文意思就是测量,所以它是用于测量View的大小,影响View大 ...
- Django 之 restframework 解析器源码分析
解析器分类: 1. JSONPaser ----> 解析 JSON-serialized data (解析JSON序列化的数据) 2.FormParser ---->解析form 表单中 ...