文章导航
- 为什么要用div实现textarea
- 关键词
- 实现效果
- 源码示例
为什么要用div实现textarea
div 实现 textarea 可以实现高度自适应
关键词
contenteditable: true|false可以将元素内容区域调整为可编辑
实现效果
源码示例
🎃 index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="./index.css" rel="stylesheet" type="text/css" />
</head>
<body>Editable:<div class="textarea" placeholder="文本框" contenteditable></div>ReadOnly:<div class="textarea textarea-readonly">000</div>Disabled:<div class="textarea textarea-disabled">000</div>Fixed Height:<div contenteditable class="textarea textarea-fixed-height">000</div></body></html>🎨 index.css
.textarea {min-width: 200px;min-height: 3rem;border: 1px solid rgba(200, 200, 200, 0.5);border-radius: 4px;padding: 4px 8px;outline: none;transition: all 0.2s ease;resize: both;overflow: auto;}/* placeholder */.textarea:empty::before {content: attr(placeholder);color: rgba(150, 150, 150, 0.5)}/* 只读 */.textarea:focus {border-color: rgba(200, 200, 200, 0.8);box-shadow: 0 0 6px 0 #dedede;}/* 禁用 */.textarea-disabled {cursor: no-drop;background-color: rgba(200, 200, 200, 0.2);}/* 高度固定 */.textarea-fixed-height {height: 2rem;}
