textarea自动增长
2021-02-10 本文已影响0人
散樱乱舞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
.textarea-wrap {
width: 300px;
display: grid;
}
.textarea-wrap::after {
content: attr(data-t-value) " ";
/* 保留空白符序列，但是正常地进行换行。 */
white-space: pre-wrap;
/* 允许在单词内换行。 */
word-break: break-all;
visibility: hidden;
}
textarea {
/* 防止手动拖动大小 */
resize: none;
/* 去除滚动条 */
overflow: hidden;
}
.textarea-wrap::after,
textarea {
border: 1px solid #333;
font: inherit;
grid-area: 1 / 1 / 2 / 2;
}
</style>
</head>
<body>
<div class="textarea-wrap">
<textarea onInput="this.parentNode.dataset.tValue = this.value"></textarea>
</div>
</body>
</html>
